Updating a single item from the cache

[ryands17]

Thank you for this amazing library!

I just had one query. Is it possible to update a single item from a list by fetching it from the queryCache?

I have a snippet below to edit a todo. Would this be the best approach to do it?

const [editTodo] = useMutation(edit, {
    onMutate: (edited) => {
      const previousTodos = queryCache.getQueryData('todos') as Todo[]
      const updatedTodos = [...previousTodos]
      const index = updatedTodos.findIndex((todo) => todo.id === edited.id)

      if (index !== -1) {
        updatedTodos[index] = {
          ...updatedTodos[index],
          ...edited.body,
        }
        queryCache.setQueryData('todos', updatedTodos)
      }

      return () => queryCache.setQueryData('todos', previousTodos)
    },
  })

[tannerlinsley]

Yeah that should be fine

[danibrear]

just came across this answer. Is this still the best way to update an element in a list? I have a graphql query that fetches a list of objects and users can update each object so I'd like to update each one. Is applying the code segment here preferable for queries as well?

[jaschaio]

@DavidBrear In react-query@v3 the second argument you pass to queryCache.setQueryData can be a function that receives the old data as an argument. So you don't need to call queryCache.getQueryData but can do this in a single function call that is passed to setQueryData instead. See https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata or https://react-query.tanstack.com/guides/optimistic-updates

[ConnorMarble]

Hello, I was hoping someone might be able to help me. I am using the same method as above to update a single todo item. What is the best way to invalidate this cache? Would you then have to invalidate the whole list of todos inside onSettled? Is there a way to just invalidate and refetch that single todo instead?

[TkDodo]

If you are operating on a list like above, the query endpoint will also fetch / return the list and is thus “bound to” the list.

[ConnorMarble]

If you are operating on a list like above, the query endpoint will also fetch / return the list and is thus “bound to” the list.

That's what I was thinking. I was curious because I saw this in the docs and thought there may be a way to to invalidate that single peice of data from the list without the endpoint returning the whole list.