Validate variables for useMutation inside onMutate

[zirkelc]

I have an ID tenantID that comes from another query hook useTenant and this ID might be null depending on the state.

Now, this ID must be passed to mutation hook like that:

export function useInit() {
  const { tenant } = useTenant();
  const tenantID = tenant?.id;

  const { mutate } = useMutation(
    (data) => init({ ...data, tenantID }),
    {
      onMutate: (variables) => {
        if (!tenantID) throw new Error('Tenant ID is empty');
      },
    },
  );

  return mutation;
}

I want to make sure that mutate won't be called before tenantID is set. For queries I would use the options.enabled flag to disable the query if tenantID == null. But in this case I have used the options.onMutate callback to check that the required ID is available.

Are there any side effects that I am not aware of or other ways to deal with this dependency?

[TkDodo]

I would just not invoke mutate if the id is undefined. But I think your approach works as well.

[ViliamKopecky]

Yes. But I would like the zod validation error to be caught by the same useMutation.

[TkDodo]

idk, something like:

const mySchema = z.object({ .. })

function useSomeMutation() {
  return useMutation({
    async mutationFn(data: { name: string }) {
      const parsed = mySchema.parse(data)
      return parsed.name
    },
  })
}

[ViliamKopecky]

I'm sorry I'm not making myself clear :) The point was that you don't have control over useSomeMutation - it comes from a external library or is generated, but it uses @tanstack/query under the hood.

But you want to add some custom validation or variables preparation, that can end up in error, and it would be nice to have shared error state (and isLoading, etc) with the original mutation.

I can wrap the external mutation in my own mutation with my validation and stuff but seems like unnecessarily too much overhead. React has setState callbacks setState((old) => old + 1), maybe useMutation could have callback to prepare variables mutation.mutate(() => ({ value: Math.random() }))

// from external library
function useSomeMutation() {
  return useMutation({
    async mutationFn(data: { name: string }) {
      return { greeting: data.name }
    },
  })
}

function useEnhanceMutation<TData = unknown, TError = unknown, TVariables = void, TContext = unknown>(
  original: UseMutationResult<TData, TError, TVariables, TContext>,
) {
  return useMutation({
    async mutationFn(data: () => Promise<TVariables>) {
      return await original.mutateAsync(await data())
    },
  })
}

function Button() {
  const mutation = useEnhanceMutation(useSomeMutation())

  return (
    <>
      {mutation.error?.message}
      {mutation.data?.greeting}
      <button
        onClick={() =>
          mutation.mutate(async () => {
            if (Math.random() > 0.5) {
              throw new Error()
            }
            return { name: 'test' }
          })
        }
      >
        Click me
      </button>
    </>
  )
}

[TkDodo]

maybe useMutation could have callback to prepare variables

so, if you're using a 3rd party lib that abstracts away the primitives that we provide, and that's the reason why you're not having enough control over how things get processed, I would suggest to either take it up with that library to give you more control / a callback to prepare variables, or not use that abstraction at all.

There doesn't seem to be a good reason for react-query to provide another callback, apart from the fact that it doesn't work in a situations where control is taken deliberately away, sorry.

[ViliamKopecky]

ok, thank you @TkDodo