T
TanStack•3y ago
unwilling-turquoise

Default Mutation Fn ?

Hi, is there a way to make a default mutation Fn like the default query Fn for all mutations ? as i do not wish to keep writing the same fetch function for mutations too i tried the below but doesn't work on useMutation 
//in my global main.ts file when add the vue-query plugin  to my vue APP 

const queryClient = new QueryClient({
  defaultOptions: {}
})

queryClient.setMutationDefaults([], {
  mutationFn: defaultMutationFn
})

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClient: queryClient,

  queryClientConfig: {
    defaultOptions: {
      queries: { queryFn: defaultQueryFn },
      mutations: {
        mutationFn: defaultMutationFn
      }
    }
  }
}

app.use(VueQueryPlugin, vueQueryPluginOptions)
app.mount('#app')
//in my global main.ts file when add the vue-query plugin  to my vue APP 

const queryClient = new QueryClient({
  defaultOptions: {}
})

queryClient.setMutationDefaults([], {
  mutationFn: defaultMutationFn
})

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClient: queryClient,

  queryClientConfig: {
    defaultOptions: {
      queries: { queryFn: defaultQueryFn },
      mutations: {
        mutationFn: defaultMutationFn
      }
    }
  }
}

app.use(VueQueryPlugin, vueQueryPluginOptions)
app.mount('#app')
2 Replies
unwilling-turquoise
unwilling-turquoiseOP•3y ago
i changed to below , it works. but i m not sure if its proper way to do : 
//in my global main.ts file when add the vue-query plugin  to my vue APP 
... 
queryClient.setMutationDefaults('*', {
  mutationFn: defaultMutationFn
})
... 
//in my global main.ts file when add the vue-query plugin  to my vue APP 
... 
queryClient.setMutationDefaults('*', {
  mutationFn: defaultMutationFn
})
... 
//in my useMutation call , this works : 
 const { isLoading, isError, error, isSuccess, mutate } = useMutation({
    mutationKey: '*'
  })

 mutate(['api/agent/v1/login', formData, true, false, true], {
      onSuccess: (result) => {
       ....
      }
   })
//in my useMutation call , this works : 
 const { isLoading, isError, error, isSuccess, mutate } = useMutation({
    mutationKey: '*'
  })

 mutate(['api/agent/v1/login', formData, true, false, true], {
      onSuccess: (result) => {
       ....
      }
   })
jolly-crimson
jolly-crimson•3y ago
You should either pass queryClient or queryClientConfig to the VueQueryPlugin but not both. I wonder why TS is not yelling at you. Also you do not need to setMutationDefaults as you can just pass it to the constructor

Did you find this page helpful?