Next.js + GraphQL Documents


Next.js plugin for preprocessing GraphQL Documents (operations, fragments and SDL)

$3

npm

``
npm add nextjs-plugin-graphql
`

pnpm

`
pnpm add nextjs-plugin-graphql
`

yarn

`
yarn add nextjs-plugin-graphql
`


$3

Create a next.config.js in your project

`ts
// next.config.ts
import type { NextConfig } from 'next';
import withGraphql from 'nextjs-plugin-graphql';

const nextConfig: NextConfig = {
reactStrictMode: true,
};

export default withGraphql(nextConfig);
`

Optionally add Next.js configuration as a parameter

`ts
// next.config.ts
import type { NextConfig } from 'next';
import withGraphql from'nextjs-plugin-graphql';

const nextConfig: NextConfig = {
reactStrictMode: true,
};

export default withGraphql({
reactStrictMode: true,
webpack(config, options) {
return config;
},
});
`

And now in your components you can import .graphql | .gql files

`graphql
query Users {
users {
id
name
}
}
`

`js
import USERS_QUERY from './usersQuery.graphql';

export default async function Page() {
const data = await gqlClient.request(USERS_QUERY);

return (



);
}
`

$3

#### graphqlOptions

The plugins supports all available options of graphql-tools webpack loader.
Check out the documentation for the list of options.

Example with options:

`ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
reactStrictMode: true,
};

export default withGraphql({
...nextConfig,
graphqlOptions: {
noDescription: true,
esModule: true,
},
});
`

$3

Typescript is unable to interpret imported graphql files, so nextjs-plugin-graphql includes definitions
for graphql files (.graphql/.gql). Per the recommendations of the Next.js maintainers you
should not reference these types in the next-env.d.ts file. You can instead create a typings
directory inside your src directory. Then simple create a definitions file (ie: index.d.ts) and
reference the definitions there. There shouldn't be any need to adjust your tsconfig.json
for your project.

src/typings/index.d.ts
`ts
///
``

$3

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT