Mit diesem Plugin können Sie GraphQL-Anfragen erfassen und später beim Abspielen von Sitzungsaufzeichnungen untersuchen. Das ist sehr hilfreich, um Probleme zu verstehen und zu beheben. Das GraphQL-Plugin ist mit Apollo- und Relay-Implementierungen kompatibel.

npm i @openreplay/tracker-graphql

Initialisieren Sie das Paket @openreplay/tracker wie gewohnt und laden Sie das Plugin hinein. Der Aufruf von plugin gibt eine Funktion zurück, die die Variablen operationKind, operationName, variables, result und duration (Standardwert 0) entgegennimmt und result unverändert zurückgibt.

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

Wenn Sie die Relay-Netzwerk-Tools verwenden, können Sie einfach eine Middleware erstellen.

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

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

Sie können eine Sanitizer-Funktion an createRelayMiddleware übergeben, um die Variablen und Daten zu bereinigen, bevor sie an OpenReplay gesendet werden.

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

Alternativ können Sie den Aufruf recordGraphQL manuell in die NetworkLayer-Implementierung einfügen. Wenn Sie den Standardweg über Network.create verwenden, gehen Sie etwa wie folgt vor:

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

Details finden Sie unter Relay Network Layer.

Für Apollo erstellen Sie einen neuen ApolloLink:

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

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

Sie können eine Sanitizer-Funktion an createRelayMiddleware übergeben, um die Variablen und Daten zu bereinigen, bevor sie an OpenReplay gesendet werden.

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

Alternativ können Sie den generischen GraphQL-Handler verwenden:

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

Details finden Sie unter Apollo Link und Apollo Networking.

Ein praktisches Beispiel dafür, wie Sie dieses Plugin nutzen, um Operationsdaten (Mutationen und Abfragen) in Ihren Session Replays zu erfassen, finden Sie in unserem ausführlichen Tutorial.

Haben Sie Probleme bei der Einrichtung dieses Plugins? Verbinden Sie sich mit unserem Slack und holen Sie sich Hilfe von unserer Community.