Этот плагин позволяет захватывать запросы 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 или посетите наш Форум и получите помощь от нашего сообщества.