Ce plugin vous permet de capturer les requêtes GraphQL et de les inspecter ultérieurement lors de la relecture des enregistrements de sessions. C’est très utile pour comprendre et corriger les problèmes. Le plugin GraphQL est compatible avec les implémentations Apollo et Relay.

npm i @openreplay/tracker-graphql

L’appel à plugin renverra la fonction, qui reçoit quatre variables operationKind, operationName, variables et result. Elle renvoie result sans modifications.

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

Suivez l’exemple ci-dessous si votre application est en SSR. Assurez-vous que tracker.start() est appelé une fois l’application démarrée côté client (dans useEffect ou 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
    tracker.start();
  }, [])
}
//...

Pour Relay, vous devez placer manuellement l’appel à recordGraphQL dans l’implémentation de NetworkLayer. Si vous utilisez la méthode standard Network.create pour l’implémenter, vous devez alors suivre l’exemple ci-dessous.

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

Consultez Relay Network Layer pour plus de détails.

Pour Apollo, vous devez créer un nouveau ApolloLink avec l’appel à recordGraphQL et l’ajouter à votre chaîne. Voici un exemple de la façon de procéder.

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

Consultez Apollo Link et Apollo Networking pour plus de détails.

Si vous recherchez un exemple pratique de l’utilisation de ce plugin pour capturer les données d’opérations (mutations et requêtes) dans vos relectures de sessions, consultez notre tutoriel détaillé ici.

Vous rencontrez des difficultés pour configurer ce plugin ? Rejoignez notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.