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