Updating Apollo local cache for a specific list/array index

Question

I'm using an Apollo local in-memory cache for my app's state management. In my cache I have an array called Clips. Somewhere in my app I need to go through the list of clips and mutate data on them. I can do it like this:

const client = useApolloClient();
client.writeData({ data: { clips: mutatedClipsArray }});

But is there a way that I could write data for only a specific index of the clips array? Something like this (which doesn't work):

client.writeData({ data: { clips[2]: mutatedClip2 }});

Yichz · Accepted Answer · 2020-06-06 05:27:49Z

3

React relies on shallow compare to diff and re-render the UI.

mutating an array element doesn't change the memory address of the array variable, so react wouldn't know that array has changed because an element of array has changed, checking each element has changed can become expensive, so you have to give a new array with the new element in the array to make react re-renders.

For apollo cannot do it directly, but you can read the cache and merge them back

const currentClips = readQuery({ query: QUERY, variables })
currentClips.data.clips[2] = newClip;
client.writeData({ data: { clips: currentClips.data.clips }});

But React would not likely to re-render correctly, so this might be better:

const currentClips = readQuery({ query: QUERY, variables })
const newClips = [...currentClips.data.clips]; make a copy
newClips[2] = newClip;
client.writeData({ data: { clips: newClips }});

** Above just sample code, you might have to verify the shape of currentClips

answered Jun 6, 2020 at 5:27

Yichz

9,71110 gold badges60 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MeanMan Over a year ago

instead of client.writeData, use the client.writeQuery ---> this will ensure the rerendering happening correctly.

freson Over a year ago

this is a useless action with a spread operator, Apollo does this on its own

Collectives™ on Stack Overflow

Updating Apollo local cache for a specific list/array index

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related