Operations codegen without documents

[namnm]

Right now to generate operations we must explicitly write *.graphql or gql tag query/mutation documents, which are pretty verbose of all those documents. I would like to discuss if we can have a plugin to generate operations without writing the documents:

1. Because the operations are generated automatically, so they can contain only 1 query/mutation per operation. We need to manually write the document if we want combined query (like what we are doing right now):

   // need to manually write combined operations
   query combined($arg1: Arg1, $arg2: Arg2) {
   b(arg1: $arg1) {
   b1
   b2
   nested: {
     nested_1
   }
   }
   c(arg2: $arg2) {
   c1
   c2
   }
   }

2. If the return type of that operation is a scalar without field selection -> perfect

3. If the return type is object which needs field selection, we can generate the document dynamically like:

   useBQuery({
   variables: {
    arg1: data,
   },
   }, {
   // selected fields
   b1: true,
   b2: true,
   nested: {
   nested_1: true,
   },
   })
   // which in the generated code it would dynamically generate the document as:
   const doc = gql`
   query b($arg1: Arg1) {
   b(arg1: $arg1) {
   ${computeSelection(selectedFields)}
   }
   }
   `
   // then execute the query as usual...

   We can easily write the computeSelection function, also with typescript nested typing: https://stackoverflow.com/a/54949737

[ardatan]

Are you looking for something like this? https://github.com/dotansimha/graphql-code-generator/pull/6861

[namnm]

@ardatan Yes, some thing like that but a bit different:

• The PR:
  1. Generate documents from schema.
  2. All fields will be selected, with optionally circular/depth config.
• My suggestion:
  1. Generate operations from schema. We can possibly use the above PR to generate documents first into a variable, then another existing plugin like typescript-operations to generate operations.
  2. Field selection will be dynamic. This would break the above because right now typescript-operations output doesnt work that way.

[zirkelc]

I'd like to add one more suggestion to support JSON schema files (currently only GraphQL SDL files are supported).

[ardatan]

@namnm typescript-operations doesn't generate operations but TypeScript types for operations. So I am not sure I follow your suggestion @zirkelc I am not sure if I understand how it can take JSON Schemas?

[zirkelc]

@namnm typescript-operations doesn't generate operations but TypeScript types for operations. So I am not sure I follow your suggestion @zirkelc I am not sure if I understand how it can take JSON Schemas?

I meant introspection schema in JSON format, like schema.json. I can already use them as schema files for the other plugins, so I thought it might be possible to use them also for this plugin?

[ardatan]

GraphQL Codegen accepts URL, introspection JSON, SDL and so on. The schema passed to the plugin is loaded by codegen so it is supported like any other plugin.

[zirkelc]

Okay, my fault. :-/ I was getting the following error: Plugin "operations-document" requires extension to be '.graphql' !

But this was due to the case that I used the extension .ts on the generated documents. I thought the error was related to the extension of the schema.

[namnm]

So I am not sure I follow your suggestion

@ardatan Yes sorry you are correct, here is my updated:

• typescript-operations generate type defs for operations, but we need to fully generate type def of all fields in the return type recursively (look like this is already done)

  // for eg the return type of this query is Post from schema
  type Post = {
  b1: string
  b2: string
  b3: number
  b4: boolean
  nested: Category
  // ...
  }
  // here are its references
  type Category = {
  nested_1: ID
  nested_2: string
  nested_3: Post[] // can recursively link back to Post
  }
  // ...

• Client generation (urql, apollo...) would need some tweak to accept dynamic field selection:

  
  usePostQuery({
  variables: {
   arg1: data,
  },
  }, {
  // dynamic field selection
  b1: true,
  b2: true,
  nested: {
  nested_1: true,
  },
  })

// I have looked at some other places and see that the dynamic field selection can be more concise like this: usePostQuery({ variables: { arg1: data, }, }, p => p.b1.b2.nested(n => n.nested_1))

- The typing for dynamic selection will be computed from above generated return type with all fields:
```ts
function usePostQuery<T extends Post>(o: PostQueryOption, f: FieldSelection<T>)
  : ComputedSelection<T>

[lucsoft]

Any updates on this? Would love to create my queries dynamically