Registry / devops / next-graphql-react

next-graphql-react

library16.0.0jsnpmunverified

A Next.js integration for the graphql-react library providing server-side rendering and automatic GraphQL cache hydration. Version 16.0.0 supports Next.js 12-14, React 18, and requires graphql-react 20.0.0 as a peer dependency. It is ESM-only, requires specific TypeScript configuration, and uses deep imports from individual .mjs modules. Designed for optimal module tree-shaking and modern Node.js (^18.17.0 || >=20.4.0).

devops

npm install next-graphql-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NEXT-GRAPHQL-REACT

next-graphql-react

devopsjavascriptv16.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

withGraphQLReact

✓ import { withGraphQLReact } from 'next-graphql-react/withGraphQLReact.mjs'

✗ import { withGraphQLReact } from 'next-graphql-react'

Package has no main index; must deep import the .mjs file. Do not use 'next-graphql-react' without a subpath.

withGraphQLReact (require)

✓ const { withGraphQLReact } = require('next-graphql-react/withGraphQLReact.mjs')

✗ const { withGraphQLReact } = require('next-graphql-react')

If using CommonJS, still deep import the .mjs file; the package is ESM but can be required in some setups.

GraphQL hooks (from graphql-react)

✓ import { useGraphQL } from 'graphql-react'

✗ import { useGraphQL } from 'next-graphql-react'

Hooks like useGraphQL come from the graphql-react package, not next-graphql-react.

Shows how to wrap a Next.js custom App with withGraphQLReact and use useGraphQL hook in a page. Uses ESM imports with .mjs extension.

// pages/_app.mjs import { withGraphQLReact } from 'next-graphql-react/withGraphQLReact.mjs'; function App({ Component, pageProps }) { return <Component {...pageProps} />; } export default withGraphQLReact(App); // Then in any page or component: // pages/index.mjs import { useGraphQL } from 'graphql-react'; function Home() { const { loading, error, data } = useGraphQL({ query: `{ viewer { name } }`, loadOnMount: true, }); if (loading) return Loading...; if (error) return Error: {error.message}; return Hello {data.viewer.name}; } export default Home;

Debug

Known issues

breakingPackage is ESM-only and requires deep imports with .mjs extension. Using a bare import 'next-graphql-react' will fail.

fix

Use deep imports like 'next-graphql-react/withGraphQLReact.mjs' instead of 'next-graphql-react'.

affects: >=16.0.0

deprecatedNext.js versions outside 12-14 may not be compatible. Future Next.js versions may break.

fix

Check peer dependency compatibility; Next.js 15 not supported yet.

affects: >=16.0.0

gotchaTypeScript requires allowJs, maxNodeModuleJsDepth, and module node16/nodenext for type checking.

fix

Set compilerOptions: { allowJs: true, maxNodeModuleJsDepth: 10, module: 'node16' }

affects: >=16.0.0

gotchaMust polyfill required globals (like fetch) for graphql-react. Not done automatically.

fix

Install cross-fetch or similar and import it in _app.mjs before the App component.

affects: >=16.0.0

breakingVersion 16 drops support for Node.js <18.17.0 and older browsers.

fix

Update Node.js to ^18.17.0 || >=20.4.0 and ensure your Browserslist target is compatible.

affects: >=16.0.0

gotchaHooks from graphql-react must be imported from 'graphql-react', not from 'next-graphql-react'.

fix

Import useGraphQL, Cache, etc. from the graphql-react package directly.

affects: >=16.0.0

Errors

Common errors & fixes

Cannot find module 'next-graphql-react' or its corresponding type declarations.

Importing from 'next-graphql-react' without deep import to the .mjs file.

fix

Change import to 'next-graphql-react/withGraphQLReact.mjs'.

Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.

Using a bundler that doesn't support ESM .mjs files or hasn't transpiled them.

fix

Ensure your bundler (e.g., Next.js) is configured to handle .mjs files (Next.js does by default with experimental esmExternals: 'loose' if needed).

withGraphQLReact is not a function

Named import from main 'next-graphql-react' which doesn't export anything (no main index).

fix

Use deep import 'next-graphql-react/withGraphQLReact.mjs' and ensure you're importing the named export.

TypeScript: Cannot use import statement outside a module

TypeScript config missing 'module' set to 'node16' or 'nodenext'.

fix

Set compilerOptions.module to 'node16' or 'nodenext' in tsconfig.json.

Upgrade

Version history

16.0.0latest on npm

Audit

Dependencies

graphql-reactrequiredPeer dependency - core GraphQL React functionality

reactrequiredPeer dependency - React runtime

react-domrequiredPeer dependency - React DOM runtime

nextrequiredPeer dependency - Next.js framework (versions 12-14)

Agent activity

11 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/jaydenseric/next-graphql-react ↗

packagenext-graphql-react ↗

homepagehttps://github.com/jaydenseric/next-graphql-react#readme ↗