Change TypedDocumentNode to a specification for embedding Operation/Fragment and Variable types within a TypeScript type

[n1ru4l]

trafficstars

In terms of typed-document-node I think we should rather make it a specification for baking-in types into a TypeScript type and showing how to extract the type from it:

type OperationString<TVariables, TResult> = string & {
  ["  __graphql_types_v1"]?: (variables: TVariables) => TResult
}

In case we later decide to change the method we could call it __graphql_types_v2 or sth.

What do you think?

---

Related:

• https://twitter.com/n1rual/status/1560506403709648898
• https://twitter.com/n1rual/status/1559164014701301763
• https://github.com/dotansimha/graphql-code-generator/issues/8296

[n1ru4l]

I did a quick test in graphql code generator by replacing TypedDocumentNode<Result, Variables> with as import('graphql').DocumentNode & { __apiType?: (variables: unknown) => FilmItemFragment };.

It seems to work quite well!

export const FilmItemFragmentDoc = {
  kind: 'Document',
  definitions: [
    {
      kind: 'FragmentDefinition',
      name: { kind: 'Name', value: 'FilmItem' },
      typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Film' } },
      selectionSet: {
        kind: 'SelectionSet',
        selections: [
          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
          { kind: 'Field', name: { kind: 'Name', value: 'title' } },
          { kind: 'Field', name: { kind: 'Name', value: 'releaseDate' } },
          { kind: 'Field', name: { kind: 'Name', value: 'producers' } },
        ],
      },
    },
  ],
} as unknown as import('graphql').DocumentNode & { __apiType?: (variables: unknown) => FilmItemFragment };

[n1ru4l]

Related https://github.com/dotansimha/graphql-typed-document-node/pull/148