此插件允许你捕获 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 { createGraphqlMiddleware } from '@openreplay/tracker-graphql';

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

export const recordGraphQL = tracker.use(createGraphqlMiddleware());

如果你正在使用 Relay 网络工具，你可以直接创建一个中间件

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

const trackerMiddleware = tracker.use(createRelayMiddleware());
const network = new RelayNetworkLayer([
  // your middleware
  // ,
  trackerMiddleware,
]);

你可以向 createRelayMiddleware 传入一个 Sanitizer 函数，以便在将变量和数据发送到 OpenReplay 之前对其进行清理。

const trackerLink = tracker.use(
  createRelayMiddleware((variables) => {
    return {
      ...variables,
      password: '***',
    };
  }),
);

或者你可以手动将 recordGraphQL 调用放入 NetworkLayer 实现中。如果你使用标准的 Network.create 方式来实现它，那么你应该按照下面的方式进行操作：

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

const handler = tracker.use(createGraphqlMiddleware());

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

你可以向 createRelayMiddleware 传入一个 Sanitizer 函数，以便在将变量和数据发送到 OpenReplay 之前对其进行清理。

const trackerLink = tracker.use(
  createTrackerLink((variables) => {
    return {
      ...variables,
      password: '***',
    };
  }),
);

或者你也可以使用通用的 graphql 处理器：

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

const handler = tracker.use(createGraphqlMiddleware());

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

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

详情请参阅 Apollo Link 和 Apollo Networking。

如果你正在寻找一个如何使用此插件在会话回放中捕获操作数据（变更和查询）的实际示例，请查看我们这里的详细教程。

在设置此插件时遇到困难？请加入我们的 Slack，或访问我们的论坛，从我们的社区获取帮助。