Allow GraphQL documents to be typed with a TypedDocumentNode for fully-typed result and variables objects

[dthyresson]

Fixes #9232

See the above issue for key points.

TLDR;

Before this PR, it wasn't possible to infer types from the useQuery or useMutation GraphQL hooks.

Also, TypedDocumentNode was not conveniently exported from @redwoodjs/web (and is now).

Now, you can do:

import type { FindPostByIdVariables, FindPostById } from 'types/graphql'

import type {
  CellSuccessProps,
  CellFailureProps,
  TypedDocumentNode,
} from '@redwoodjs/web'

import Post from 'src/components/Post/Post'

export const QUERY: TypedDocumentNode<
  FindPostById,
  FindPostByIdVariables
> = gql`
  query FindPostById($id: Int!) {
    post: post(id: $id) {
      id
      title
      body
      authorId
      createdAt
    }
  }

and infer types:

For context:

See https://the-guild.dev/blog/typed-document-node

TypedDocumentNode is a development tool for creating fully typed DocumentNode objects. It means that just by passing the GraphQL query/mutation/subscription/fragment to a supporting GraphQL client library, you'll get fully-typed result and variables objects.

This is made possible by TypeScript type inference.

TypedDocumentNode is a development tool that allows you to create fully typed DocumentNode objects. This means that by simply passing your GraphQL query, mutation, subscription, or fragment to a supporting GraphQL client library, you'll get fully-typed result and variables objects. This is made possible by TypeScript type inference.

[dthyresson]

@Tobbe and others: one question I had is if the generators should be updated to detect if using TS and infer types as above. If som, we can make this a separate PR enhancement to update the generators.

[Tobbe]

@dthyresson Initial reaction, without looking at any code, is yes, we should, and yes, let’s do that in a separate PR 🙂

[dthyresson]

@dthyresson Initial reaction, without looking at any code, is yes, we should, and yes, let’s do that in a separate PR 🙂

@Tobbe I added issue #9632 to implement/discuss