ReactQuery v3 to v5 InfiniteData not re-rendering after setQueryData
Hello Guys!
I've upgraded from v3 to v5. I had an infinite list of decks. When I add a Deck to server then I read the whole InifniteData and I push the new item to the first index of first page. I see the new data in DevTool but re-render is missing. What's wrong? I don't find anything about changes. I'm sure Im miss something.
Code:
export const useAddDeckMutation = () => {
const queryClient = useQueryClient()
return useMutation({
mutationFn: postDeck,
onSuccess: (data) => {
if(data){
// Detail item
queryClient.setQueryData(DECK_QUERY_KEYS.detail(data.id.toString()), data)
// Manipulate card list
const list = queryClient.getQueryData(DECK_QUERY_KEYS.list()) as InfiniteData<PaginateListType<DeckType>>
if(list.pages && list.pages.length > 0) list.pages[0].data = [
data,
...list.pages[0].data,
]
queryClient.setQueryData(DECK_QUERY_KEYS.list(), list)
}
return data
}
})
}
I use useSuspenseInfiniteQuery for decklist if its matter
Thank you!
1 Reply
absent-sapphireOP•2y ago
Update:
I see that in docs:
Updates via setQueryData must be performed in an immutable way. DO NOT attempt to write directly to the cache by mutating oldData or data that you retrieved via getQueryData in place.I’ll rework it tomorrow. works well with it: return produce(data, (draft) => { if (draft.pages.length > 0) { draft.pages[0].data = [ newData, ...draft.pages[0].data ]; } });