Allow codegen for non-gatsby schemas

[d4rekanguok]

Allow codegen for non-gatsby schemas

[d4rekanguok]

@devuxer @kokokenada @imanbee thanks for leaving a like on the parent issue. Just want to let you know this feature is now supported in v2.6.0, thanks to @kije!

[ricokahler]

That makes sense. I had a feeling I'd have to open another upstream lol

That's good info though. Looking at the repo, it seems like graphql-tag-pluck is the package we need this feature in. I'll propose it and we'll see what happens.

[ricokahler]

I was doing a bit of digging in that repo and it seems like they do actually expose an API for picking the particular tags. 👇

export interface GraphQLTagPluckOptions {
  modules?: Array<{ name: string; identifier?: string }>;
  gqlMagicComment?: string;
  globalGqlIdentifierName?: string | string[];
}

• Source to the above
• The default config

And we can override this config via options to loadDocuments. This options object eventually gets passed to the CodeFileLoader options

---

So it seems it is actually possible to codegen for different schemas based on the tag type 🎉

Here is a very rough idea of how I'm thinking we could implement this.

1. override the default GraphQLTagPluckOptions['modules'] configuration to only pluck types for Gatsby related files.

This means instead of using the default modules value, we go with this 👇

const pluckConfig = {
  modules: [
    { name: 'gatsby', identifier: 'graphql', },
    globalGqlIdentifierName: 'graphql', // <-- this is for `gatsby-node` `.ts` files from my other issue
  ],
};

Why?

If we limit the scope of modules graphql-tag-pluck will try to codegen for, we'll ensure we're not using the Gatsby schema for Apollo Client queries or similar.

2. add a new configuration to this plugin e.g. additionalSchemas (or similar) that allows the user to specify a pluckConfig, a schema, and a corresponding types output file.

So if I was adding support for the Apollo Client, my gatsby-config could look something along the lines of this:

const getSchemaSomehow = () => /* ... */;

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: 'gatsby-plugin-graphql-codegen',
      options: {
        // ...
        additionalSchemas: [
          {
            pluckConfig: {
              modules: [{ name: '@apollo/client', identifier: 'gql' }],
              globalGqlIdentifierName: [],
            },
            filename: 'apollo-types.ts',
            schema: getSchemaSomehow(),
          },
        ],
      },
    },
  ],
};

This probably needs more thought but something like this could work.

Let me know what you think!

[d4rekanguok]

Hi @ricokahler, thanks for coming back with another interesting issue (I still owe you a response in #29!)

Going all in, we could work towards this plugin officially supporting the Apollo client via allowing an additional non-gatsby schema and generating a different types file per the type of graphql tag

I really like that!

However it looks like graphql-toolkit (the lib that scan code files for graphql documents) doesn't expose an api for filter/ignore graphql tags, and the returned graphql documents also don't contain information of their graphql tags & libraries. We'd need to open an issue at graphql-toolkit & see if the folks there want to support this.

With the current setup, we can only filter documents by theirs file paths and operation type :/ which doesn't seem too helpful.

[d4rekanguok]

Wow, great work! For whatever reasons, when I saw that module option earlier, I asumed that setting it would add more tags instead of overwriting the defaults. Thanks for that!

It's definitely possible to get this feature out then. I think the config you propose makes sense. Maybe add an option to declare more file paths as well.

I think the steps could be:

• limit plucking to Gatsby's tag only

• add loadSchema support

• refactor the gataby-node portion to be able to run codegen for multiple configs

• expose new config options

And then I'll need to start adding tests as well 😅

Let me know what you think and if you'd have time to help with these!

[ricokahler]

Yeah I have some time. I can probably get a PR to you within the next few days if you'll take it. I can also set up jest for the repo in a separate PR if you want too.

[d4rekanguok]

Thanks @ricokahler, I'll take them all — please send PRs!

If you know a typescript + gatsby + apollo opensource projects / starter that we can test this plugin with, please share as well.