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.

Installation

npm i @openreplay/tracker-graphql

Usage

The plugin call will return the function, which receives four variables operationKind, operationName, variables and result. It returns result without changes.

If your website is a Single Page Application (SPA)

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

If your web app is Server-Side-Rendered (SSR)

Follow the below example if your app is SSR. Ensure tracker.start() is called once the app is started on the client side (in useEffect or componentDidMount).

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

For Relay you should manually put recordGraphQL call to the NetworkLayer implementation. If you have standard Network.create way to implement it, then you should follow the below example.

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

See Relay Network Layer for details.

Apollo

For Apollo you should create a new ApolloLink with recordGraphQL call and put it to your chain. Here is an example on how to do it.

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,
  //...
]);

See Apollo Link and Apollo Networking for details.

Tutorial

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.

Have questions?

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