{"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,"search_vec":"'0.0.7':35 'activ':83 'adapt':115 'apollo':62,140 'apollo-cli':139 'appear':79 'applic':21 'box':68 'cach':50 'cadenc':95 'client':3,8,24,48,63,121,141,148 'comprehens':40 'control':124 'current':32 'data':127 'debug':15,111,142 'design':17 'develop':29,84,144 'developer-tool':143 'devtool':4,9,135 'differenti':98 'earli':13 'early-stag':12 'ecosystem':105 'explor':52 'featur':88 'fix':94 'flexibl':114 'focus':107 'futur':70 'granular':123 'graphql':2,7,23,44,54,120,134,147 'graphql-client':146 'includ':73,99 'inspect':46 'integr':101 'interfac':41 'javascript':132 'key':97 'matur':89 'monitor':43 'nativ':20,110,138 'offer':122 'oper':45 'out-of-the-box':64 'packag':37 'pattern':116 'plan':71 'platform':31 'plugin':16 'project':78 'provid':38 'rather':90 'react':19,109,137 'react-nat':136 'real':58 'real-tim':57 'relay':76 'releas':85 'respons':129 'rozenit':1,6,28,104,133 'rozenite-graphql-client-devtool':5 'schema':55 'specif':25 'stage':14 'strong':106 'support':61,118 'time':59 'tool':30,145 'track':131 'typescript':149 'updat':86 'urql':74 'util':22 'variabl':128 'various':119 'version':34 'within':26","created_at":"2026-04-21T18:00:07.153665+00:00","updated_at":"2026-04-21T18:00:07.153665+00:00","problems":[],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/CodeByRahulSaini/rozenite-graphql-client-devtool","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rozenite-graphql-client-devtool","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","http-networking","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}