{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install rozenite-graphql-client-devtool"],"cli":null},"imports":["import { apolloGraphqlDevtoolLink } from 'rozenite-graphql-client-devtool';","import { useGraphqlClientDevtool } from 'rozenite-graphql-client-devtool';","import type { GraphQLClientAdapter } from 'rozenite-graphql-client-devtool';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}