Ce plugin vous permet de capturer les requêtes GraphQL et de les inspecter ultérieurement lors de la relecture des enregistrements de session. Cela 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

Initialisez le package @openreplay/tracker comme d’habitude et chargez-y le plugin. L’appel à plugin renverra la fonction, qui reçoit quatre variables operationKind, operationName, variables, result et duration (par défaut 0) et renvoie result sans modification.

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

Si vous utilisez les outils réseau de Relay, vous pouvez simplement [créer un 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
])

Ou vous pouvez 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 devriez faire quelque chose comme ci-dessous :

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

Consultez Relay Network Layer pour plus de détails.

Pour Apollo, vous devez créer un nouvel ApolloLink.

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

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

Vous pouvez également utiliser le handler graphql générique :

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

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

Si vous recherchez un exemple pratique d’utilisation de ce plugin pour capturer les données d’opérations (mutations et requêtes) dans vos relectures de session, 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 de notre communauté.