Updating cached values of an array

[mercmobily]

Imagine that you have a page that lists a bunch of records, and to load them you do this:

const { isLoading, isFetching, isError, data: list, error, refetch } = useQuery({
  queryKey: ['<%=endpointName%>'],
  queryFn: () => api.getQuery(),
})

say I have a socket message which tells me that project ID 3 has changed its description.
Is it a good idea to update the cache with the new information as received by the socket?

I mean, you could also invalidate the full cache of list, but since we know WHAT changed and HOW... is it against best practices to try and patch list up?

EDITED I was using it wrong, I fixed the getting function; when I asked the question it was:

const { isLoading, isFetching, isError, data: list, error, refetch } = useQuery({
  queryKey: ['<%=endpointName%>'],
  queryFn: () => api.getQuery().then(data => list.value = data),
})

[TkDodo]

what is list ? This code doesn't look like idiomatic react. Generally, there shouldn't be side-effects in render functions, and assigning something to list.value is a side-effect.

is it against best practices to try and patch list up?

you'd want to use queryClient.setQueryData for that. if list is a different query.

[mercmobily]

Sorry, I updated the question and the code. It was a bad paste.
My point is, imagine that you get as a response:

[
  { id: 0, name: "Tony" },
  { id: 1, name: "Chiara" },
  { id: 2, name: "Michael" },
]

And I get a notification that the record with ID 2 goes from "Michael" to "Matt". Ideally, I would update the cached array and only change the one with ID 2. I couldn't replace the whole array, since I wouldn't have the rest of the data (but only the fact that record ID 2 has changed).

If I receive such a notification, the other option is to change the data in the List view, and then invalidate the cache altogether. Which seems wasteful, since we know what's changed... but maybe that's the easiest/sanest thing to do?

[TkDodo]

queryClient.setQueryData has a functional updater, so you'd do:

queryClient.setQueryData(key, (prev) =>
  prev?.map(entry => entry.id === newEntry.id ? newEntry: entry)
)

[mercmobily]

Just wanted to say "thank you" for this. So obvious... so elegant...