Next.js + GraphQL Documents

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

Installation

npm

npm install --save nextjs-plugin-graphql

or yarn

yarn add nextjs-plugin-graphql

Usage

Create a next.config.js in your project

// next.config.js
const withGraphql = require('nextjs-plugin-graphql');

module.exports = withGraphql();

Optionally add Next.js configuration as a parameter

// next.config.js
const withGraphql = require('nextjs-plugin-graphql');

module.exports = withGraphql({
  webpack(config, options) {
    return config;
  },
});

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

query Users {
  users {
    id
    name
  }
}

import USERS_QUERY from './usersQuery.graphql';

export default () => {
  const { loading, error, data } = useQuery(USERS_QUERY);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      <ul>
        {data.users.map((user) => (
          <li key={user.id}>
            {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

Options

graphqlOptions

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

Example with options:

module.exports = withGraphql({
  graphqlOptions: {
    noDescription: true,
    esModule: true,
  },
});

Typescript

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

/// <reference types="nextjs-plugin-graphql/types/graphql" />

Contributors

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

LICENSE

MIT