[typescript-react-query] add documentMode support

[lanwin]

Is your feature request related to a problem? Please describe.

We want to preprocess the document to remove duplicated fragments. For this we created a custom version of graphql tag witch works fine. But now we want to use the react-query plugin and can not enable graphql-tags with it.

Currently typescript-react-query forces the document-mode to "string".

Describe the solution you'd like

typescript-react-query should be able to use the document-modes the other plugins support.

Describe alternatives you've considered

It would be possible to fix our problem by make grpahql-code-gen dedup the fragments before generating the document, but I have no idea yet how to do so. Another way would be to preprocess the document when its done.

[ggascoigne]

I really feel that the issue here is more about how the generated documents aren't already deduplicated.

In the short term I've been working around this by deduplicating the fragments in a custom fetch call. Using graphql-tag inline to create a deduplicated ast and then converting it back to a string before I submit it.

Something like this:

import { print } from 'graphql'
import gql from 'graphql-tag'

...

    const res = await fetch('/api/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...headers,
      },
      body: JSON.stringify({
        query: print(gql(query)),
        variables,
      }),
    })
...

It works but seems rather heavy handed. I rather think that these could all be deduplicated when doing the codegen and suspect that I got away with it when using the apollo version because apollo does this for me.

[zlegein]

We have another use case for this enhancement. We use a babel-plugin-marco, that will rename operationNames. So, for us we would like to set this config on the codegen.yml

schema: MY_SCHEMA_PATH
documents: './src/**/*.graphql'
generates:
  ./generates.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      gqlImport: graphql-tag-transform.macro