Este plugin te permite capturar peticiones GraphQL e inspeccionarlas más tarde mientras reproduces las grabaciones de las sesiones. Esto resulta muy útil para entender y solucionar problemas. El plugin GraphQL es compatible con las implementaciones de Apollo y Relay.

npm i @openreplay/tracker-graphql

La llamada a plugin devolverá la función, que recibe cuatro variables operationKind, operationName, variables y result. Devuelve result sin cambios.

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

Sigue el ejemplo de abajo si tu aplicación es SSR. Asegúrate de que tracker.start() se llame una vez que la aplicación se haya iniciado en el lado del cliente (en useEffect o 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();
  }, [])
}
//...

Para Relay debes colocar manualmente la llamada a recordGraphQL en la implementación de NetworkLayer. Si tienes la forma estándar Network.create para implementarlo, entonces debes seguir el ejemplo de abajo.

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

Consulta Relay Network Layer para más detalles.

Para Apollo debes crear un nuevo ApolloLink con la llamada a recordGraphQL y colocarlo en tu cadena. Aquí tienes un ejemplo de cómo hacerlo.

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

Consulta Apollo Link y Apollo Networking para más detalles.

Si buscas un ejemplo práctico de cómo usar este plugin para capturar datos de operaciones (mutaciones y consultas) en tus repeticiones de sesión, consulta nuestro tutorial detallado aquí.

¿Tienes problemas para configurar este plugin? Conéctate a nuestro Slack o consulta nuestro Foro y obtén ayuda de nuestra comunidad.