此插件允许你捕获 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 网络工具，你可以直接[创建一个中间件](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 handler：

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