What's not working?

Hello 👋 I'm an Apollo Client maintainer and spotted a TypeScript bug while putting together the workshop for RedwoodJS Conf. When working with the useMutation hook exported by @redwoodjs/web, the generic argument types seem to be lost when the GraphQL documented is typed with a TypedDocumentNode. If I use useMutation directly from @apollo/client, type inference works as expected. This is especially noticeable on the data property passed to the update function on the useMutation hook. The type should be TData, but is instead set to any.

How do we reproduce the bug?

You can reproduce this issue by creating a document node and setting it to a TypedDocumentNode type.

import { TypedDocumentNode } from '@apollo/client';
import { useMutation } from '@redwoodjs/web';

const MUTATION: TypedDocumentNode<MyQuery, MyQueryVariables> = gql`
  query MyQuery($myVar: String) {
    someField(var: $myVar)
  }
`

const [execute] = useMutation(MUTATION);
//                ^? useMutation<any, GraphQLOperationVariables>(...)

Here, TData and TVariables on useMutation should be set to MyQuery and MyQueryVariables respectively via the type inference from TypedDocumentNode. Unfortunately it looks like these types are set to any and GraphQLOperationVariables, which I assume are the defaults for those generic parameters.

Switching the useMutation import from @redwoodjs/web to @apollo/client makes this work correctly and TData and TVariables are set correctly.

const [execute] = useMutation(MUTATION);
//                ^? useMutation<MyQuery, MyQueryVariables>(...)

I can workaround the issue by explicitly providing the generic parameters, though I'd love for this to work with type inference as well 🙂.

const [execute] = useMutation<MyQuery, MyQueryVariables>(MUTATION)
//                ^? useMutation<MyQuery, MyQueryVariables>(...)

It would also be super nice if you exported the TypedDocumentNode type from this library so that you can type the document itself and rely on type inference when passing that around to hooks.

What's your environment? (If it applies)

System:
    OS: macOS 13.5.2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /private/var/folders/95/0ztcsp7509l18k_0csk2nys00000gn/T/xfs-5f819fea/node
    Yarn: 3.6.1 - /private/var/folders/95/0ztcsp7509l18k_0csk2nys00000gn/T/xfs-5f819fea/yarn
  Databases:
    SQLite: 3.39.5 - /usr/bin/sqlite3
  Browsers:
    Chrome: 117.0.5938.92
    Safari: 16.6
  npmPackages:
    @redwoodjs/auth-custom-setup: 6.3.1 => 6.3.1 
    @redwoodjs/core: 6.3.1 => 6.3.1

Are you interested in working on this?

• I'm interested in working on this