このプラグインを使用すると、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 network tools を使用している場合は、ミドルウェアを作成するだけで対応できます。

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

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

createRelayMiddleware にサニタイザー関数を渡すと、OpenReplay に送信する前に変数とデータをサニタイズできます。

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

または、NetworkLayer の実装に recordGraphQL の呼び出しを手動で追加することもできます。標準の 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 にサニタイザー関数を渡すと、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 に参加して、コミュニティのサポートを受けてください。