GraphQL

This plugin allows you to capture GraphQL requests and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues. GraphQL plugin is compatible with Apollo and Relay implementations.

npm i @openreplay/tracker-graphql

Initialize the @openreplay/tracker package as usual and load the plugin into it. The plugin call will return the function, which receives four variables operationKind, operationName, variables, result and duration (default 0) returns result without changes.

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());

If you’re using Relay network tools, you can simply [create a middleware](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
])

Or you can manually put recordGraphQL call to the NetworkLayer implementation. If you are standard Network.create way to implement it, then you should do something like below:

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);

See Relay Network Layer for details.

For Apollo you should create a new ApolloLink.

import { createTrackerLink } from '@openreplay/tracker-graphql'

const trackerLink = createTrackerLink(tracker);
const yourLink = new ApolloLink(trackerLink)

Alternatively you can use generic 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,
  // ...
]);

See Apollo Link and Apollo Networking for more details.

If you’re looking for a practical example of how to use this plugin to capture operation data (mutations and queries) in your session replays, check out our detailed tutorial over here.

Having trouble setting up this plugin? Please connect to our Slack or check out our Forum and get help from our community.