[Plugin Request] Option to auto generate all queries/mutations/fragments from a schema

[user471]

For example I have a lot of mutations like this

type Mutation {
  createFoo(bar: Float!, foo: String!): String!
}

And I don't what to white

mutation createFoo($foo: String!, $bar: Float!) {
	createFoo(foo: $foo, bar: $bar)
}

for every mutation
So It would be helpful if code generator just generate useCreateFooMutation for every mutation from the schema

[n1ru4l]

How would you know the correct selection set for each mutation? What if there was any recursion?

[user471]

How would you know the correct selection set for each mutation? What if there was any recursion?

By default it could select everything except nested fields, if you need a different result you need to write a custom mutation. Also there could be a config option to include nested fields. Mutation with recursion could be skipped.

[dotansimha]

PRs are welcome :) Very similar to what AWS Amplify does.

@n1ru4l we can add level: X to the config of this plugin and then create queries/documents according to that.

[Konosh93]

I am trying to open a PR for this issue, but I am stuck at generating the documents and making them available for subsequent plugins. File generation, currently, seems to be done with Promise.all which does not guarantee any specific order for the generated files.

https://github.com/dotansimha/graphql-code-generator/blob/master/packages/graphql-codegen-cli/src/generate-and-save.ts#L27
Is it possible to add an option to allow certain plugins to run synchronously?

[amcdnl]

Did you ever get this merged?

[dotansimha]

@Konosh93 The piece of code you mentioned is only the writing process of the output files, and not the generation itself.
You can't communicate between plugins at the moment - each one is running on it's own (in order, but on it's own).
Why do you need to pass documents between plugins? you don't want to write the output to the fs?

[Konosh93]

@dotansimha

The piece of code you mentioned is only the writing process of the output files, and not the generation itself

I agree, and this is what I was trying to find a workaround for.

You can't communicate between plugins at the moment - each one is running on it's own (in order, but on it's own).

As you mentioned, the codegen is run in order, for all plugins. At this point, documents are generated by the desired plugin but not yet written to the fs.

Why do you need to pass documents between plugins? you don't want to write the output to the fs?

I don't. Sorry, my wording was confusing. I want to make the generated documents files available for subsequent plugins.

overwrite: true
schema: "graphql/schema.graphql"
generates:
  graphql/docs.graphql:
    documents: null
    plugins:
      - plugin-for-generating-docs
  output/types.ts:
    documents: "graphql/docs.graphql"
    plugins: 
      - plugin-that-uses-the-generated-docs

[dotansimha]

I see. It's not possible at the moment, because plugins are being executed after the point that all documents has been collected, parsed and validated against the schema.

[Konosh93]

Thanks. We figured that wouldn't be possible with the current interface. In our own use cases, we will be running the plugin before other plugins, using a separate config file. I will update this answer once the plugin is ready.

[Fazzacoot]

Hello everyone.
Is there any update to this issue?

[dotansimha]

At the moment, no updates on this issue.

If someone really needs it, you can use buildOperationNodeForField from @graphql-toolkit/common (https://github.com/ardatan/graphql-toolkit/blob/master/packages/common/src/build-operation-for-field.ts). You can find an example for using it here: https://github.com/Urigo/graphql-mesh/blob/77311327ee1ba246adafd71dcbd3f658f8750305/packages/runtime/src/utils.ts#L153

PRs are welcome ;)

[valerii15298]

Your first link, no longer works... :( can you share workaround please?

[n1ru4l]

@valerii15298 Here you go: https://github.com/ardatan/graphql-tools/blob/149afddba856211e64c9263b9c6770f7838691f8/packages/utils/src/build-operation-for-field.ts#L58

[Julien-Sytadelle]

I tried to use graphql-mesh (graphql-toolkit is now merged in) but it does not generate graphql operations files.
Have a look at https://github.com/timqian/gql-generator. 200 lines that just does the job.
Set a depthLimit at least to 2 if you want to have some fields.

I would not use it to automatically integrate the files but you can easily copy paste modify everywhere you need graphql operations.

Finally, big up to graphql-code-generator people !

[tamsanh]

Hey @Julien-Sytadelle , thanks a lot for the note! With gqlg I was able to finally create a fully fledged code generation system by combining 2 passes of graphql-codegen and 1 pass of gqlg. The basic idea is to use graphql-codegen to generate the combined ast, the model types, use gqlg to generate the fragments, and then finish it off with one last graphql-codegen to combine the fragments and models all together.

This is the ultimate script I used, as well as the corresponding codegen settings. I hope this helps someone else!

#!/bin/bash

yarn graphql-codegen -c ./graphql-codegen/codegen.ast.yml &&
yarn gqlg --schemaFilePath ./temp/all.graphql --destDirPath ./temp/gqlg/ &&
yarn graphql-codegen -c ./graphql-codegen/codegen.hooks.yml &&
yarn eslint src/backend --fix # rounded off with a final lint, to match project settings

# codegen.ast.yml

schema:
  - ../source-graphql/*.graphql
overwrite: true
generates:
  ./temp/all.graphql:
    plugins:
      - schema-ast
  ./temp/models.ts:
    plugins:
      - typescript

# codegen.hooks.yml
overwrite: true
schema:
  - ./temp/all.graphql
documents:
  - ./temp/**/*.gql
  - ./temp/models.ts
generates:
  ./src/backend/app.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

[sc0ttdav3y]

Thank you @tamsanh — this helped me today.

Only thing I'd add is I had to add the withHooks: true option to get typescript-react-apollo to build the hooks.

[taffit]

Thank you @tamsanh, it's working a treat!
I'm not needing anything React-specific. Now the only thing missing are fragments. Let's hope that the PR mentioned by @zirkelc gets merged soon.

[behnam-io]

@tamsanh I tried using your method, but I'm getting "Syntax Error: Unexpected Name "subscription_root", step "yarn graphql-codegen -c ./graphql-codegen/codegen.hooks.yml". I'm using psotgres + hasura for generating my graphql schema. Any ideas?

[Julien-Sytadelle]

Hi ! That's great, I will have a try. Best, Le jeu. 20 mai 2021 à 19:48, Tam Nguyen ***@***.***> a écrit :

…

Hey @Julien-Sytadelle <https://github.com/Julien-Sytadelle> , thanks a lot for the note! With gqlg I was able to finally create a fully fledged code generation system by combining 3 passes of graphql-codegen and one pass of gqlg. The basic idea is to use graphql-codegen to generate the combined ast, the model types, use gqlg to generate the fragments, and then finish it off with one last graphql-codegen to combine it all together. This is the ultimate script I used, as well as the corresponding codegen settings. I hope this helps someone else! #!/bin/bash yarn graphql-codegen -c ./graphql-codegen/codegen.ast.yml && yarn gqlg --schemaFilePath ./temp/all.graphql --destDirPath ./temp/gqlg/ && yarn graphql-codegen -c ./graphql-codegen/codegen.models.yml && yarn graphql-codegen -c ./graphql-codegen/codegen.hooks.yml && yarn eslint src/backend --fix # rounded off with a final lint, to match project settings # codegen.ast.yml schema: - ../source-graphql/*.graphqloverwrite: truegenerates: ./temp/all.graphql: plugins: - schema-ast # codegen.models.ymloverwrite: trueschema: - ./temp/all.graphqlgenerates: ./temp/models.ts: plugins: - typescript # codegen.hooks.ymloverwrite: trueschema: - ./temp/all.graphqldocuments: - ./temp/**/*.gql - ./temp/models.tsgenerates: ./src/backend/app.ts: plugins: - typescript - typescript-operations - typescript-react-apollo — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2349 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHW4EHKQSYBA722EQXGT5XLTOVDO3ANCNFSM4VYANNXQ> .

-- Julien Cornaz +33 6 84 33 50 65 Architecture de l'Information - R&D - .NET - Machine Learning www.sytadelle.fr

[shotor]

I had a similar problem and hacked something together with gqlg as well as an intermediate step, then wrapped it in a CLI application:
https://github.com/shotor/ts-gql-sdk-gen

I think it would be possible fully through graphql-codegen if it supported a needs property. So for instance:

id: generate-gql-typings
schema:
  - ./src/graphql/*.graphql
overwrite: true
generates:
  ./_generated/all.graphql:
    plugins:
      - graphql-full-queries-types # or whatever plugin does this
  ./_generated/schema.graphql:
    plugins:
      - graphql-schema # or whatever plugin does this

needs: [generate-gql-typings]
schema:
  - ./_generated/schema.graphql
documents:
  - ./_generated/all.graphql
generates:
  ./_generated/sdk.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-sdk # or hooks, or whatever you need

Another option is to write a plugin that uses graphql-codegen internally programatically. You could specify the plugins it should use. Not sure what the syntax should be:

schema:
  - ./_generated/*.graphql
generates:
  ./_generated/sdk.ts:
    plugins:
      - full-codegen
        plugins: # plugins it should use internally
          - react-hooks
          - typescript-sdk

[zirkelc]

It looks like this PR (#6861) brings that feature!

[tinezmatias]

I can make it with a custom document loader:

codegen.yml:

overwrite: true
schema: './**/*.graphql'
generates:
  graphql.tsx:
    documents:
      - './**/*.graphql':
          loader: './loader.js'
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
    config:
      withHooks: true
      withComponent: false
      withHOC: false

loader:

const { parse } = require('graphql');
const { loadSchema } = require('@graphql-tools/load');
const { generateAll } = require('gql-generator-node');
const { GraphQLFileLoader } = require('@graphql-tools/graphql-file-loader');

module.exports = async (docString, config) => {
  const schema5 = await loadSchema(docString, {
    loaders: [new GraphQLFileLoader()],
  });

  const operations = generateAll(schema5);

  let strigned = '';

  for (const key in operations) {
    if (Object.hasOwnProperty.call(operations, key)) {
      const operation = operations[key];
      for (const key in operation) {
        if (Object.hasOwnProperty.call(operation, key)) {
          const element = operation[key];
          strigned += element;
        }
      }
    }
  }

  const parsed = parse(strigned);
  return parsed;
};

[0xDamei]

Hi friends, is there any best practice now?