continuing-cyan

creating a custom useMutation hook

I'm struggling to create a custom mutation hook passing in variables and destrcuturing If i add destructed params inside useMutation if get property does not exist on type void Does this mean i need to pass generics to infer the types?

12 Replies

quickest-silver•3y ago

Hi 👋 The mutation variables can be inferred if you pass a reference to your typed mutation function

useMutation(api.document.addAnonymous...)

useMutation(api.document.addAnonymous...)

continuing-cyanOP•3y ago

hiya How do i do that? Is it possible to destructre in the arguments or outside

export const useCreateApplication = () => {
  return useMutation<TData, TVariables>((variables) => {
    const { id, applicationOfflineCreateBody } = variables;
    api.document.addAnonymousApplicationOfflineDocumentDetails(
      eroId,
      id,
      applicationOfflineCreateBody
    );
  });

export const useCreateApplication = () => {
  return useMutation<TData, TVariables>((variables) => {
    const { id, applicationOfflineCreateBody } = variables;
    api.document.addAnonymousApplicationOfflineDocumentDetails(
      eroId,
      id,
      applicationOfflineCreateBody
    );
  });

continuing-cyanOP•3y ago

I get the same errors if i copy the example on @TkDodo 🔮 blog

const mutation = useMutation({

  mutationFn: ({ title, body }) => updateTodo(title, body),

})

const mutation = useMutation({

  mutationFn: ({ title, body }) => updateTodo(title, body),

})

quickest-silver•3y ago

Try useMutation(api.document.addAnonymousApplicationOfflineDocumentDetails) Assuming that function is typed it'll infer the variables from the parameters Else you can type them yourself if you really want to

continuing-cyanOP•3y ago

so that function is fully typed as it's coming from an openapi generator (orval) but looks like it isn't inferring. I've solved it by passing generics

  return useMutation<unknown, unknown, TVariables, unknown>({
    mutationFn: ({ id, applicationOfflineCreateBody }) =>
      api.document.addAnonymousApplicationOfflineDocumentDetails(
        eroId,
        id,
        applicationOfflineCreateBody
      ),
  });

  return useMutation<unknown, unknown, TVariables, unknown>({
    mutationFn: ({ id, applicationOfflineCreateBody }) =>
      api.document.addAnonymousApplicationOfflineDocumentDetails(
        eroId,
        id,
        applicationOfflineCreateBody
      ),
  });

but wondering why it isn't inferring from the api call

continuing-cyanOP•3y ago

this is the api fn

quickest-silver•3y ago

It should be able to infer it as far as I'm aware. Perhaps it's something to do with the structure of the parameters; I usually use object interfaces Have you tried useMutation(api.document.addAnonymousApplicationOfflineDocumentDetails) without passing any generics, and the same thing with the object mutationFn overload?

continuing-cyanOP•3y ago

ahhh.. i know why. for some reason any post requests get typed as <void>

return apiClient<void>({

return apiClient<void>({

i can't actually change this as it's auto generated

quickest-silver•3y ago

You'd need to fix the code generation in that case 🙂

continuing-cyanOP•3y ago

thanks for your help. Certainly made it clearer for me

quickest-silver•3y ago

No worries :reactquery:

continuing-cyanOP•3y ago

i suppose the weird thing is it's inferring the void as TVariables instead of the response. The ones which produce <void> don't have a 201 response from the mutation is there anything i can do inside the custom api function

xport const apiClient = async <T>(config: AxiosRequestConfig): Promise<T> => {

xport const apiClient = async <T>(config: AxiosRequestConfig): Promise<T> => {

Gaming

Programming

creating a custom useMutation hook

Did you find this page helpful?