{"id":15809,"library":"rozenite-graphql-client-devtool","title":"Rozenite GraphQL Client DevTool","description":"rozenite-graphql-client-devtool is an early-stage debugging plugin designed for React Native applications utilizing GraphQL clients, specifically within the Rozenite developer tools platform. Currently at version 0.0.7, this package provides a comprehensive interface for monitoring GraphQL operations, inspecting the client's cache, and exploring the GraphQL schema in real-time. It supports Apollo Client out-of-the-box, with future plans to include URQL and Relay. The project appears to be in active development, releasing updates as features mature rather than on a fixed cadence. Its key differentiators include its integration with the Rozenite ecosystem, strong focus on React Native debugging, and a flexible adapter pattern to support various GraphQL clients, offering granular control over what data (variables, responses) is tracked.","status":"active","version":"0.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/CodeByRahulSaini/rozenite-graphql-client-devtool","tags":["javascript","rozenite","graphql","devtools","react-native","apollo-client","debugging","developer-tools","graphql-client","typescript"],"install":[{"cmd":"npm install rozenite-graphql-client-devtool","lang":"bash","label":"npm"},{"cmd":"yarn add rozenite-graphql-client-devtool","lang":"bash","label":"yarn"},{"cmd":"pnpm add rozenite-graphql-client-devtool","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React Native application using this devtool.","package":"react","optional":false},{"reason":"Peer dependency required as this is a React Native specific devtool.","package":"react-native","optional":false},{"reason":"Required for integration with Apollo Client, which is currently the only supported GraphQL client.","package":"@apollo/client","optional":true},{"reason":"Required by @apollo/client for GraphQL parsing and schema definition.","package":"graphql","optional":true}],"imports":[{"note":"This package primarily uses ESM. Using CommonJS 'require' might lead to import errors in modern React Native projects.","wrong":"const { apolloGraphqlDevtoolLink } = require('rozenite-graphql-client-devtool');","symbol":"apolloGraphqlDevtoolLink","correct":"import { apolloGraphqlDevtoolLink } from 'rozenite-graphql-client-devtool';"},{"note":"This is a named export, not a default export. Attempting to import it as a default export will result in an undefined value.","wrong":"import useGraphqlClientDevtool from 'rozenite-graphql-client-devtool';","symbol":"useGraphqlClientDevtool","correct":"import { useGraphqlClientDevtool } from 'rozenite-graphql-client-devtool';"},{"note":"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.","wrong":"import { GraphQLClientAdapter } from 'rozenite-graphql-client-devtool';","symbol":"GraphQLClientAdapter","correct":"import type { GraphQLClientAdapter } from 'rozenite-graphql-client-devtool';"}],"quickstart":{"code":"import { ApolloClient, InMemoryCache, ApolloLink, HttpLink, ApolloProvider } from '@apollo/client';\nimport { apolloGraphqlDevtoolLink, useGraphqlClientDevtool } from 'rozenite-graphql-client-devtool';\nimport React from 'react';\nimport { View, Text } from 'react-native';\n\n// 1. Create the DevToolLink Link\nconst devToolLink = apolloGraphqlDevtoolLink();\n\n// 2. Create your HTTP Link\nconst httpLink = new HttpLink({\n  uri: 'https://api.example.com/graphql',\n});\n\n// 3. Combine links - Rozenite Link MUST be first\nconst client = new ApolloClient({\n  link: ApolloLink.from([\n    devToolLink,  // ⚠️ IMPORTANT: Must be first to capture all operations\n    httpLink,\n  ]),\n  cache: new InMemoryCache(),\n});\n\nfunction MyGraphQLComponent() {\n  return (\n    <View>\n      <Text>Your GraphQL-powered content here.</Text>\n    </View>\n  );\n}\n\nfunction App() {\n  // 4. Initialize the devtool\n  useGraphqlClientDevtool({\n    client,\n    clientType: 'apollo',\n    includeVariables: true,\n    includeResponseData: true,\n  });\n\n  return (\n    <ApolloProvider client={client}>\n      <MyGraphQLComponent />\n    </ApolloProvider>\n  );\n}","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure `devToolLink` is the very first element in `ApolloLink.from([devToolLink, ...otherLinks])`.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[],"ecosystem":"npm"}