How to use setQueryData on deep objects?

[ffxsam]

The examples on this page are helpful, but only cover simplistic use cases.

If I have a structure like this returned from GraphQL:

{
  "items": [
    { "id": 1, "label": "Hello" },
    { "id": 2, "label": "Bye" }
  ]
}

how do I call setQueryData() in the optimistic update to modify the label of ID 2?

Currently, I'm using Immutable.js to deeply set the value using a path locator like ['items', 1]. I'm curious if TanStack has some built-in way that I missed.

[TkDodo]

There's nothing special in React Query here - it's up to you to transform data in an immutable way. You can of course use immutable.js or something like immerjs if you want.

how do I call setQueryData() in the optimistic update to modify the label of ID 2?

I'd just do:

queryClient.setQueryData({
  ...previousData,
  items: previousData.items.map(item => item.id === id ? { ...item, label: newLabel } : item)
})

[ffxsam]

Ok, just double-checking to see if there wasn't some built-in way I was missing. We're using Immutable and it works fine. Thanks!