https://github.com/jaydenseric/next-graphql-react

A graphql-react integration for Next.js.
https://github.com/jaydenseric/next-graphql-react

graphql maintained next node npm react

Last synced: 5 days ago
JSON representation

A graphql-react integration for Next.js.

• Host: GitHub
• URL: https://github.com/jaydenseric/next-graphql-react
• Owner: jaydenseric
• License: mit
• Created: 2019-01-02T02:33:53.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-11-22T06:08:55.000Z (12 months ago)
• Last Synced: 2024-10-29T14:09:31.458Z (8 days ago)
• Topics: graphql, maintained, next, node, npm, react
• Language: JavaScript
• Homepage: https://npm.im/next-graphql-react
• Size: 279 KB
• Stars: 77
• Watchers: 4
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • Funding: .github/funding.yml
  • License: license.md

Awesome Lists containing this project

README

        
![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/[email protected]/graphql-react-logo.svg)

# next-graphql-react

A [`graphql-react`](https://npm.im/graphql-react) integration for [Next.js](https://nextjs.org).

## Installation

Within an existing [Next.js](https://nextjs.org) project, to install [`next-graphql-react`](https://npm.im/next-graphql-react) and its [`graphql-react`](https://npm.im/graphql-react) peer dependency with [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run:

```sh

npm install next-graphql-react graphql-react

```

Setup the [Next.js custom `App`](https://nextjs.org/docs/advanced-features/custom-app) module:

- Polyfill the [required globals](https://github.com/jaydenseric/graphql-react#requirements).

- Decorate the default export with the function [`withGraphQLReact`](./withGraphQLReact.mjs).

Then [React](https://reactjs.org) hooks imported from [`graphql-react`](https://npm.im/graphql-react) can be used within the [Next.js](https://nextjs.org) project pages and components.

## Requirements

Supported runtime environments:

- [Node.js](https://nodejs.org) versions `^18.17.0 || >=20.4.0`.

- Browsers matching the [Browserslist](https://browsersl.ist) query [`> 0.5%, not OperaMini all, not dead`](https://browsersl.ist/?q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead).

Projects must configure [TypeScript](https://www.typescriptlang.org) to use types from the ECMAScript modules that have a `// @ts-check` comment:

- [`compilerOptions.allowJs`](https://www.typescriptlang.org/tsconfig#allowJs) should be `true`.

- [`compilerOptions.maxNodeModuleJsDepth`](https://www.typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.

- [`compilerOptions.module`](https://www.typescriptlang.org/tsconfig#module) should be `"node16"` or `"nodenext"`.

## Exports

The [npm](https://npmjs.com) package [`next-graphql-react`](https://npm.im/next-graphql-react) features [optimal JavaScript module design](https://jaydenseric.com/blog/optimal-javascript-module-design). It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported via the [`package.json`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):

- [`withGraphQLReact.mjs`](./withGraphQLReact.mjs)