useQuery vs useMutation

[mobiixi36]

All the example I saw about useQuery is when the page is loaded the data fetching starts. I wonder when to use useQuery and when to use useMutation?

[Avi98]

Hi @mobiixi36, As stated in mutation section useMutation is to serve the purpose of create/update/delete data. You can use useQuery for fetching the data. One use case that I find useMutation very useful is when you want to re-fetch some queries once mutation happens,

This example is taken from the docs.

import { useMutation, queryCache } from 'react-query'

// When this mutation succeeds, refetch any queries with the `todos` or `reminders` query key
const [mutate] = useMutation(addTodo, {
  onSuccess: () => {
    queryCache.refetchQueries('todos')
    queryCache.refetchQueries('reminders')
  },
})

mutate(todo)

// The 3 queries below will be refetched when the mutation above succeeds
const todoListQuery = useQuery('todos', fetchTodoList)

All other most common use cases like updating query from the response returned from useMutation .

[cmacdonnacha]

@Avi98 Are there any other advantages to using useMutation? I feel like you could just use fetch and on a success do queryCache.refetchQueries('todos') anyway. Does useMutation prevent multiple requests being made like useQuery or something?

[TkDodo]

To me, the main advantage of useMutation is that it tracks loading state for that mutation. You can use that for example to disable a button once the user has clicked it while the mutation is ongoing (similar to what github does) and you can also handle error states.

[sergiodxa]

If you define your mutations on each component then there is not too much difference than doing it manually. To me, the best things of mutations is that I can create them in their own file and use them everywhere and the mutation will always know what to do before and after the mutation is completed.