تتيح لك هذه الإضافة التقاط طلبات 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 trackerGraphQL from '@openreplay/tracker-graphql';

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

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

إذا كنت تستخدم أدوات شبكة Relay، فيمكنك ببساطة [إنشاء وسيط (middleware)](https://github.com/relay-tools/react-relay-network-modern/tree/master tab=readme-ov-file#example-of-injecting-networklayer-with-middlewares-on-the-client-side)

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

const trackerMiddleware = createRelayMiddleware(tracker)

const network = new RelayNetworkLayer([
  // your middleware
  // ,
  trackerMiddleware
])

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

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

const handler = createGraphqlMiddleware(tracker)

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 = createTrackerLink(tracker);
const yourLink = new ApolloLink(trackerLink)

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

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

const handler = createGraphqlMiddleware(tracker)

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

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

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

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

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