Support TypedDocumentString

[lopezjurip]

Perceived Problem

The most popular codegen for GraphQL (graphql-codegen) has two output modes:

1. TypedDocumentNode where the output are JSON representation of the graphql queries.
2. TypedDocumentString where the output is a string representation of the graphql queries.

When using string representation the output is usually smaller and easy to compare than it's object representation.

See: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#documentmode

Currently graphql-request doesn't support TypedDocumentString

Example:

// codegen.ts
import { type CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'schema.graphql',
  documents: ['src/**/*.tsx'],
  generates: {
    './src/gql/': {
      preset: 'client',
      config: {
        documentMode: 'string' // 👈
      }
    }
  }
}

import { request } from 'graphql-request'
import { gql } from './gql'
 
// This is a TypedDocumentString
const helloQuery = gql(`
  query hello {
    hello
  }
`)

await request(endpoint, helloQuery) // typescript error 🚨

// Generated code
export type HelloQueryVariables = Exact<{ [key: string]: never }>
 
export type HelloQuery = { __typename?: 'Query'; hello: string }
 
export const HelloDocument = new TypedDocumentString(`
  query hello {
    hello
  }
`) as unknown as TypedDocumentString<HelloQuery, HelloQueryVariables>

Ideas / Proposed Solution(s)

Support TypedDocumentString

[jasonkuhrt]

Related #854