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.