Gatsby: eslint-plugin-graphql & Gatsby

[jonny-harte]

HI, just wondering if/how I can get eslint to work with my graphQL queries in gatsby?

I can see there's a eslint-plugin-graphql package on npm, how would this be configured to work with Gatsby?

https://www.npmjs.com/package/eslint-plugin-graphql

[wardpeet]

cc @vladar @freiksenet @pieh

[vladar]

Do you use custom ESlint configuration? I am asking because ESLint config shipped in Gatsby by default already includes this plugin.

[jonny-harte]

Yeah I've been experimenting with eslint. Here's my package.json and .eslintrc. Let me know if what I'm doing doesn't make sense!

https://github.com/hartey11/posh-wash/blob/master/package.json
https://github.com/hartey11/posh-wash/blob/master/.eslintrc

[vladar]

Here is a relevant section from our default config:

plugins: [`graphql`],
rules: {
  "graphql/template-strings": [
    `error`,
    {
      env: `relay`,
      // You should use schemaJson instead, see bellow
      schemaString: printSchema(schema, { commentDescriptions: true }),
      tagName: `graphql`,
    },
  ],
}

In your case, it is probably easier to use schemaJson vs schemaString. Docs for eslint-plugin-graphql contain a dedicated section on how you retrieve it. Use the URL http://localhost:8000/___graphql as Gatsby GraphQL endpoint.

And also check out our official docs on custom eslint setup: https://www.gatsbyjs.org/docs/eslint/#configuring-eslint

[Js-Brecht]

Hey @vladar, I have a question about using printSchema(): Will that work if you are just running eslint on the CLI, or via something like vscode-eslint; or does it need an active build running?

[pieh]

There is no http://localhost:8000/___graphql endpoint during builds, so yeah that might not work. It might be beneficial to use custom .eslintrc (or different eslint config) together with something like https://github.com/NickyMeuleman/gatsby-plugin-extract-schema that writes generated schema to file (that you can reference in eslint configuration) and this would work both with build and develop?

Asterisk to above is that this plugin writes out the schema file just once (after bootstrap finishes) and gatsby relatively recently implemented ability to rebuild the schema on the fly, so there might be situations when schema file is not up to date with actual schema? (but this would happen only if new fields get inferred / if some plugins use schema customization to create types dynamically)

[Js-Brecht]

I tend to use gatsby-plugin-typegen because it gives me TS types for my GraphQL queries, as well as eslint/vscode-apollo support. It has the same shortcoming... it only generates the types/schema once, after bootstrap. Works pretty well for me, though.

---

@pieh I don't want to sidetrack the thread; I just had a really quick question: I haven't really examined what gets hit when gatsby rebuilds the schema. Is that process documented/discussed anywhere, or is this one of those "go digging" moments? It just might be interesting to see if there's a decent method to hook into the process to regenerate those schema files when changes are made.

[pieh]

Is that process documented/discussed anywhere, or is this one of those "go digging" moments?

We don't have public API/hooks for it, so it's not really documented. Our "Gatsby Internals" docs are both sparse and not always up to date.

I can only point you toward SET_SCHEMA action in gatsby internals - you could use:

emitter.on(`SET_SCHEMA`, action => {
  const newSchema = action.payload
  // handle new schema somehow - rewrite schema file / regenerate types 
})

But keep in mind that this is private APIs and this approach can break at any time (as a side note - plugins like gatsby-plugin-extract-schema or gatsby-plugin-typegen also use internal API already to get access to schema - using store.getState().schema so those can also break at any time as well).

[vladar]

Thank you for opening this, @hartey11

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜