mutation typing

[hyusetiawan]

im following the mutation for reach as shown here: https://gqty.dev/guides/react/write

but I am not getting the typing when I call the returned mutation function, like so:

but inside the callback, I am able to see the typing properly:

is there a way to type the login function?

[hyusetiawan]

I call login function like so:

 await login({
      args: {id}
    })

and the error message is : Type '{ id: string | null; }' is not assignable to type 'never'.ts(2322)

[vicary]

You'll need to explicitly type the callback from the 2nd parameter and on, those types will be inferred in the returning mutation function.

There are two common styles to type it:

Direct imports

import { type Mutation, type Variables } from './gqty';

const [login, mutationStates] = useMutation((mutation, args: Variables<Mutation["login"]>) => {
  const token = mutation.login(args);
  return token;
});

// Later in your code
<Button onClick={() => {
  login({ username, password });
}}>Login</Button>

Curated inputs

const [login, mutationStates] = useMutation((mutation, username: string, password: string) => {
  const token = mutation.login({ username, password });
  return token;
});

// Later in your code
<Button onClick={() => {
  login(username, password);
}}>Login</Button>

[vicary]

On a second thought, it may work with modifications on the core logic. It's not trivial works though.

No guarantees, but I will on-and-off exploring the new idea in upcoming months.

[hyusetiawan]

I think it's feasible to preserve the current API signature and just create a wrapper around it to make it similar dev UX wise with useQuery, here, what do you think?

given the following generated mutation schema:

export interface Mutation {
  __typename?: 'Mutation'
  login: (args: { bla: Scalars['Int']; id: Scalars['String'] }) => Maybe<Session>
  logout?: Maybe<ScalarsEnums['Void']>
}

I have the following hook wrapper:

import { useMutation, useQuery } from '@/gqty'
import {type Mutation } from '@/gqty/schema.generated';
import { UseMutationState } from '@gqty/react'
type KeysMatching<T extends object, V> = {
  [K in keyof T]-?: T[K] extends V ? K : never
}[keyof T];

function useMutation2<M extends KeysMatching<Mutation, object>> (m: M,  cb: (result: ReturnType<Mutation[M]>) => void) {
  
  const [func, state] = useMutation((mutation, inputs) => {
    const mf = mutation[m]
    if (mf != null && typeof mf === 'function') {
      cb(mf(inputs))
    }
  })
  // need to force cast it to unknown, im sure there are better ways
  return [func, state ] as unknown as [(args: Parameters<Mutation[M]>[0]) => void, UseMutationState] 
}

and here's how to use it:

use-mutation2-demo.mp4

[vicary]

Not sure if I follow.

Do you want to default to the direct import method with your wrapper?

[hyusetiawan]

no, I want to type the function call from the returning hook, the func from [func, {isLoading}] is fully typed with args, whereas using the default useMutation it's not, only the mutation object inside the callback is typed. Hope I am making more sense :D

[vicary]

This may break some of the backward compatibility, because in V2 we allow the func to provide a completely different selection function. But I can see the clarity and ease of use with only one way to use it.

With our V3 already approaching beta, I think it may be inconvenient for others to take this breaking change. But we could definitely create a new hook, e.g. useSimpleMutation so you get the type fn(foo: string) from useSimpleMutaiton((mutation, foo: string) => {...}).

If it turns out great and everyone is using it, we can replace the original one in the next major.