gatsby-plugin-graphql-config

Persists Gatsby GraphQL schema and fragments to the .cache directory, as well as a GraphQL Config file to enable full-featured tooling for:

• vscode-graphql, and other IDE extensions that use the official GraphQL LSP
• eslint-plugin-graphql
• graphql code generator for Gatsby projects using TypeScript
• eventually graphiql will use it, even!

Install

npm install gatsby-plugin-graphql-config

How to use

First, add it to your plugin configuration:

// In your gatsby-config.js

plugins: [`gatsby-plugin-graphql-config`]

Simplest setup

If you are able to configure your tools to seek a different basePath for loading GraphQL Config, point them to .cache directory.

Manual setup for repositories with no other GraphQL projects

If your project is only a Gatsby project, you can place a graphql.config.js file at the root of your Gatsby project like this:

// <my project>/graphql.config.js

module.exports = require("./.cache/graphql.config.json")

If it's in a subdirectory such as a site/ folder, you would use this:

// <my project>/graphql.config.js

module.exports = require("./site/.cache/graphql.config.json")

Manual setup for repositories with multiple GraphQL projects

If your repository has multiple GraphQL projects including Gatsby, you will want a config similar to this at the root:

// <my project>/graphql.config.js

module.exports = {
  projects: {
    site: require("packages/site/.cache/graphql.config.json"),
    server: {
      schema: "packages/server/src/**/*.{graphql,gql}",
      documents: "packages/server/src/queries/**/*.{ts,tsx,js,jsx}",
    },
  },
}

How it works

It writes out these files to the Gatsby .cache directory:

• schema.graphql - a complete representation of the schema, including plugins
• fragments.graphql - all user, plugin and gatsby-core provided fragments in one file
• graphql.config.json - a graphql-config@3 compatible config file with absolute file resolutions