Rozenite GraphQL Client DevTool

Warnings

• gotcha When combining Apollo Links, the `apolloGraphqlDevtoolLink` must be placed first in the `ApolloLink.from` array to ensure it captures all GraphQL operations, including mutations and subscriptions.
  Fix: Ensure `devToolLink` is the very first element in `ApolloLink.from([devToolLink, ...otherLinks])`.
• gotcha This package is currently in early development (version 0.0.7). While functional, the API may undergo changes in future minor or patch releases until a stable 1.0.0 version is reached.
  Fix: Refer to the official documentation and release notes for each update. Pinning exact versions (e.g., `"rozenite-graphql-client-devtool": "0.0.7"`) is recommended to avoid unexpected breaking changes in early versions.

Install

• npm install rozenite-graphql-client-devtool npm
• yarn add rozenite-graphql-client-devtool yarn
• pnpm add rozenite-graphql-client-devtool pnpm

Imports

• apolloGraphqlDevtoolLink
  wrong:

  const { apolloGraphqlDevtoolLink } = require('rozenite-graphql-client-devtool');

  correct:

  import { apolloGraphqlDevtoolLink } from 'rozenite-graphql-client-devtool';

  This package primarily uses ESM. Using CommonJS 'require' might lead to import errors in modern React Native projects.
• useGraphqlClientDevtool
  wrong:

  import useGraphqlClientDevtool from 'rozenite-graphql-client-devtool';

  correct:

  import { useGraphqlClientDevtool } from 'rozenite-graphql-client-devtool';

  This is a named export, not a default export. Attempting to import it as a default export will result in an undefined value.
• GraphQLClientAdapter
  wrong:

  import { GraphQLClientAdapter } from 'rozenite-graphql-client-devtool';

  correct:

  import type { GraphQLClientAdapter } from 'rozenite-graphql-client-devtool';

  This symbol is a TypeScript type/interface, used for type annotation when creating custom client adapters. Using `import type` is recommended for type-only imports to improve clarity and allow bundlers to optimize.

Quickstart

This quickstart demonstrates how to integrate rozenite-graphql-client-devtool with an Apollo Client instance in a React Native application, ensuring proper link order and devtool initialization.

import { ApolloClient, InMemoryCache, ApolloLink, HttpLink, ApolloProvider } from '@apollo/client';
import { apolloGraphqlDevtoolLink, useGraphqlClientDevtool } from 'rozenite-graphql-client-devtool';
import React from 'react';
import { View, Text } from 'react-native';

// 1. Create the DevToolLink Link
const devToolLink = apolloGraphqlDevtoolLink();

// 2. Create your HTTP Link
const httpLink = new HttpLink({
  uri: 'https://api.example.com/graphql',
});

// 3. Combine links - Rozenite Link MUST be first
const client = new ApolloClient({
  link: ApolloLink.from([
    devToolLink,  // ⚠️ IMPORTANT: Must be first to capture all operations
    httpLink,
  ]),
  cache: new InMemoryCache(),
});

function MyGraphQLComponent() {
  return (
    <View>
      <Text>Your GraphQL-powered content here.</Text>
    </View>
  );
}

function App() {
  // 4. Initialize the devtool
  useGraphqlClientDevtool({
    client,
    clientType: 'apollo',
    includeVariables: true,
    includeResponseData: true,
  });

  return (
    <ApolloProvider client={client}>
      <MyGraphQLComponent />
    </ApolloProvider>
  );
}