此插件允许你捕获 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，你应该创建一个带有 recordGraphQL 调用的新 ApolloLink，并将其放入你的链中。下面是一个如何操作的示例。

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，或查看我们的论坛，从我们的社区获取帮助。