optimistic update example for the useinfiniteQuery with typescript

[k4mr4n]

Hey there
I wonder if is there any examples of useinfiniteQuery optimistic update with supporting typescript?
I implemented a way but I feel like it's not the best and trying to find a better practice for it. also, I could not find a proper generic type to assign to the setQueryData function so I could use it on the updater function.

here is my code

queryClient.setQueryData<WhatTypeShouldBeHere<PaginatedFeed>>(feedKey, (oldFeed: any) => {
            const pages = oldFeed?.pages || []
            const firstPage = pages[0] || {
              nodes: [],
              edges: [],
              totalCount: 0,
            }
            firstPage.nodes?.unshift(node)
            firstPage.edges?.unshift({
              cursor: '',
              node,
            })
            firstPage.totalCount += 1
            if (!pages[0]) {
              oldFeed.pages = [firstPage]
            }
            return oldFeed
          })

Another question would be, can I mutate the oldFeed arg, or I should use something like immer?

[TkDodo]

WhatTypeShouldBeHere

InfiniteData<PaginatedFeed> (InfiniteData is exposed by RQ)

Another question would be, can I mutate the oldFeed arg, or I should use something like immer?

no, never mutate, always work immutably please

[k4mr4n]

Thank you that was really helpful

I have a post component that has an inline reply input so you can add a reply to the post or add a like instantly.
This post component exists on 3 different pages.
The only approach to update the post query and add an item to the replies query and also update the feed query is by hard-coding all of the queries. and there is no one generic code to fix it all.