onMutate return context type is unknown.

[Keith-Web3]

I'm using the onMutate function and returning a context from the function however, when I try to use the returned context in the onSuccess or onError callback, the context type is being inferred as unknown. I tried setting a type on the onMutate handler but that didn't help and the only workaround I could do was to set the context as any in both the onSuccess and onError handlers. Is there a better way I could type the context?

[TkDodo]

show a typescript playground please because that should work out of the box if you use type inference.

[Keith-Web3]

I tried to do that now and it's inferring the type correctly. I read your article on using typescript with react query and found out it's the generics in my mutation that are causing the issue. I know now to let typescript infer the type unless absolutely necessary.

[sans-harness]

I have the same question. I have a custom hook from the backend that is provided to me that uses react-query's mutation internally and I cannot assign the type of context. Relevant code:

  const {
    mutate: updateDescription,
    isLoading: updatingDescription,
    isSuccess: updateDescriptionSuccess
  } = useUpdateRepositoryMutation(
    { repo_ref: repoRef },
    {
      onMutate: async newData => {
        await queryClient.cancelQueries({ queryKey: ['findRepository', repoRef] })

        const previousRepoData = repoData

        // Optimistically update the description, mapping it to match repoData format
        setRepoData(prevState => ({
          ...prevState,
          description: newData.body.description || ''
        }))

        // Return the previous state for rollback if needed
        return { previousRepoData }
      },
      onError: (error: UpdateRepositoryErrorResponse, _data, context) => {
        setRepoData(context.previousRepoData)

        // Invalidate the query to refetch the data from the server
        queryClient.invalidateQueries({ queryKey: ['findRepository', repoRef] })

        const message = error.message || 'Error updating repository description'
        setApiError({ type: ErrorTypes.DESCRIPTION_UPDATE, message })
      },
      onSuccess: () => {
        setApiError(null)
      }
    }
  )

error: 'context' is of type 'unknown'

The custom hook is not configured to accept generics. Any help would be appreciated.

[TkDodo]

Please show a typescript playground. You aren’t even showing the custom hook so it’s all guesswork 🤷

[oscar-b]

I get context: unknown if onMutate is defined after onError in the useMutation hook.

[TkDodo]

yes, that’s a typescript limitation