Registry /
web-framework / rozenite-graphql-client-devtool
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
apolloGraphqlDevtoolLink
✓ import { apolloGraphqlDevtoolLink } from 'rozenite-graphql-client-devtool';
✗ const { apolloGraphqlDevtoolLink } = require('rozenite-graphql-client-devtool');
This package primarily uses ESM. Using CommonJS 'require' might lead to import errors in modern React Native projects.
useGraphqlClientDevtool
✓ import { useGraphqlClientDevtool } from 'rozenite-graphql-client-devtool';
✗ 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
✓ import type { GraphQLClientAdapter } from 'rozenite-graphql-client-devtool';
✗ import { 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.
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>
);
}
Audit
Dependencies
reactrequiredPeer dependency required for any React Native application using this devtool.
react-nativerequiredPeer dependency required as this is a React Native specific devtool.
@apollo/clientoptionalRequired for integration with Apollo Client, which is currently the only supported GraphQL client.
graphqloptionalRequired by @apollo/client for GraphQL parsing and schema definition.