Ce plugin vous permet de capturer les requêtes GraphQL et de les inspecter ultérieurement lors de la relecture des enregistrements de sessions. Cela s’avère 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 (0 par défaut) et renvoie result sans modification.

import Tracker from '@openreplay/tracker';
import { createGraphqlMiddleware } from '@openreplay/tracker-graphql';

const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,
});

export const recordGraphQL = tracker.use(createGraphqlMiddleware());

Si vous utilisez les outils réseau de Relay, vous pouvez simplement créer un middleware

import { createRelayMiddleware } from '@openreplay/tracker-graphql';

const trackerMiddleware = tracker.use(createRelayMiddleware());
const network = new RelayNetworkLayer([
  // your middleware
  // ,
  trackerMiddleware,
]);

Vous pouvez passer une fonction Sanitizer à createRelayMiddleware pour assainir les variables et les données avant de les envoyer à OpenReplay.

const trackerLink = tracker.use(
  createRelayMiddleware((variables) => {
    return {
      ...variables,
      password: '***',
    };
  }),
);

Vous pouvez aussi 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 = tracker.use(createGraphqlMiddleware());

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 devriez créer un nouvel ApolloLink :

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

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

Vous pouvez passer une fonction Sanitizer à createRelayMiddleware pour assainir les variables et les données avant de les envoyer à OpenReplay.

const trackerLink = tracker.use(
  createTrackerLink((variables) => {
    return {
      ...variables,
      password: '***',
    };
  }),
);

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

import { createGraphqlMiddleware } from '@openreplay/tracker-graphql'; // see above for recordGraphQL definition
import { ApolloLink } from 'apollo-link';

const handler = tracker.use(createGraphqlMiddleware());

const trackerApolloLink = new ApolloLink((operation, forward) => {
  operation.setContext({ start: performance.now() });
  return forward(operation).map((result) => {
    const time = performance.now() - operation.getContext().start;
    return handler(
      // op kind, name, variables, response, duration (default 0)
      operation.query.definitions[0].operation,
      operation.operationName,
      operation.variables,
      result,
      time,
    );
  });
});

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