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


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

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

// openreplay.js
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
}, [])


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,, variables, result)
const network = Network.create(fetchQuery);

See Relay Network Layer for details.


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?',
const link = ApolloLink.from([

See Apollo Link and Apollo Networking for 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 and get help from our community.