تتيح لك هذه الإضافة التقاط طلبات GraphQL وفحصها لاحقًا أثناء إعادة تشغيل تسجيلات الجلسات. وهذا مفيد جدًا لفهم المشكلات وإصلاحها. تتوافق إضافة GraphQL مع تطبيقات Apollo وRelay.

npm i @openreplay/tracker-graphql

قم بتهيئة حزمة @openreplay/tracker كالمعتاد وحمّل الإضافة فيها. سيعيد استدعاء plugin الدالة التي تستقبل أربعة متغيرات operationKind وoperationName وvariables وresult وduration (القيمة الافتراضية 0) وتعيد result دون تغييرات.

import Tracker from '@openreplay/tracker';
import { createGraphqlMiddleware } from '@openreplay/tracker-graphql';

const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,
});

export const recordGraphQL = tracker.use(createGraphqlMiddleware());

إذا كنت تستخدم أدوات الشبكة الخاصة بـ Relay، فيمكنك ببساطة إنشاء وسيط (middleware)

import { createRelayMiddleware } from '@openreplay/tracker-graphql';

const trackerMiddleware = tracker.use(createRelayMiddleware());
const network = new RelayNetworkLayer([
  // your middleware
  // ,
  trackerMiddleware,
]);

يمكنك تمرير دالة Sanitizer إلى createRelayMiddleware لتنقية المتغيرات والبيانات قبل إرسالها إلى OpenReplay.

const trackerLink = tracker.use(
  createRelayMiddleware((variables) => {
    return {
      ...variables,
      password: '***',
    };
  }),
);

أو يمكنك وضع استدعاء recordGraphQL يدويًا في تطبيق NetworkLayer. إذا كنت تستخدم الطريقة القياسية Network.create لتنفيذه، فعليك أن تفعل شيئًا مثل ما يلي:

import { createGraphqlMiddleware } from '@openreplay/tracker-graphql'; // see above for recordGraphQL definition
import { Environment } from 'relay-runtime';

const handler = tracker.use(createGraphqlMiddleware());

function fetchQuery(operation, variables, cacheConfig, uploadables) {
  return fetch('www.myapi.com/resource', {
    // ...
  })
    .then((response) => response.json())
    .then((result) =>
      handler(
        // op kind, name, variables, response, duration (default 0)
        operation.operationKind,
        operation.name,
        variables,
        result,
        duration,
      ),
    );
}

const network = Network.create(fetchQuery);

راجع Relay Network Layer للمزيد من التفاصيل.

بالنسبة لـ Apollo يجب عليك إنشاء ApolloLink جديد:

import { createTrackerLink } from '@openreplay/tracker-graphql';

const trackerLink = tracker.use(createTrackerLink());
const yourLink = new ApolloLink(trackerLink);

يمكنك تمرير دالة Sanitizer إلى createRelayMiddleware لتنقية المتغيرات والبيانات قبل إرسالها إلى OpenReplay.

const trackerLink = tracker.use(
  createTrackerLink((variables) => {
    return {
      ...variables,
      password: '***',
    };
  }),
);

أو بدلاً من ذلك يمكنك استخدام معالج graphql العام:

import { createGraphqlMiddleware } from '@openreplay/tracker-graphql'; // see above for recordGraphQL definition
import { ApolloLink } from 'apollo-link';

const handler = tracker.use(createGraphqlMiddleware());

const trackerApolloLink = new ApolloLink((operation, forward) => {
  operation.setContext({ start: performance.now() });
  return forward(operation).map((result) => {
    const time = performance.now() - operation.getContext().start;
    return handler(
      // op kind, name, variables, response, duration (default 0)
      operation.query.definitions[0].operation,
      operation.operationName,
      operation.variables,
      result,
      time,
    );
  });
});

const link = ApolloLink.from([
  trackerApolloLink,
  // ...
]);

راجع Apollo Link وApollo Networking للمزيد من التفاصيل.

إذا كنت تبحث عن مثال عملي حول كيفية استخدام هذه الإضافة لالتقاط بيانات العمليات (عمليات التعديل والاستعلامات) في إعادة تشغيل جلساتك، فاطّلع على شرحنا التفصيلي هنا.

هل تواجه صعوبة في إعداد هذه الإضافة؟ يُرجى الانضمام إلى Slack الخاص بنا أو زيارة المنتدى والحصول على المساعدة من مجتمعنا.