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

npm i @openreplay/tracker-graphql

سيُعيد استدعاء plugin الدالة التي تستقبل أربعة متغيرات هي operationKind وoperationName وvariables وresult. وتُعيد result دون أي تغييرات.

import OpenReplay from '@openreplay/tracker';
import trackerGraphQL from '@openreplay/tracker-graphql';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
});

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

tracker.start();

اتبع المثال أدناه إذا كان تطبيقك يستخدم SSR. تأكد من استدعاء tracker.start() بمجرد بدء تشغيل التطبيق على جانب العميل (في useEffect أو componentDidMount).

// openreplay.js
import OpenReplay from '@openreplay/tracker/cjs';
import trackerGraphQL from '@openreplay/tracker-graphql/cjs';

export const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
export const recordGraphQL = tracker.use(trackerGraphQL());

// MyApp.js
import { tracker } from './openreplay';

function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, [])
}
//...

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

import { Environment } from 'relay-runtime';
import { recordGraphQL } from './openreplay'; // see above for recordGraphQL definition

//...
function fetchQuery(operation, variables, cacheConfig, uploadables) {
  return fetch('ENDPOINT', {
  //...
  })
    .then(response => response.json())
    .then(result =>
      recordGraphQL(operation.operationKind, operation.name, variables, result)
    );
}
//...
const network = Network.create(fetchQuery);

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

بالنسبة إلى Apollo يجب عليك إنشاء ApolloLink جديد مع استدعاء recordGraphQL ووضعه في سلسلتك. إليك مثال على كيفية القيام بذلك.

import { ApolloLink } from '@apollo/client';
import { recordGraphQL } from './openreplay'; // see above for recordGraphQL definition

const trackerApolloLink = new ApolloLink((operation, forward) => {
  return forward(operation).map((result) => {
    const operationDefinition = operation.query.definitions[0];
    return recordGraphQL(
      operationDefinition.kind === 'OperationDefinition' ? operationDefinition.operation : 'unknown?',
      operation.operationName,
      operation.variables,
      result
    );
  });
});
//...
const link = ApolloLink.from([
  trackerApolloLink,
  //...
]);

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

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

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