Next.js plugin to preprocess GraphQL Documents
npm install nextjs-plugin-graphqlNext.js plugin for preprocessing GraphQL Documents (operations, fragments and SDL)
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
///
``