Is it possible to use a mutation return value to patch an infinite query?

[steinarb]

RTK infinite queries are cool and quite simple to use.

But in transforming some of my queries to infinite queries I have lost the ability to have mutations dispatch api.util.updateQueryData() to replace the query results with the mutation results.

Is it possible/simple to replace infinite query data with mutation results?

Thanks!

[markerikson]

Can you clarify what you mean by "lost the ability"? updateQueryData should work for infinite queries.

[steinarb]

I transformed this query into

        getJobs: builder.query({ query: (accountId) => '/jobs/' + accountId.toString(), providesTags: ['JobRegistered', 'PaymentRegistered'] }),

this infinite query.

        getJobs: builder.infiniteQuery({
            infiniteQueryOptions: {
                initialPageParam: 0,
                getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => lastPageParam + 1,
            },
            query: ({ queryArg, pageParam }) => '/jobs/' + queryArg.toString() + '?pagenumber=' + pageParam, providesTags: ['JobRegistered', 'PaymentRegistered']
        }),

I had this mutation that updated the original query

        postJobsDelete: builder.mutation({
            query: body => ({ url: '/admin/jobs/delete', method: 'POST', body }),
            async onQueryStarted(body, { dispatch, queryFulfilled }) {
                try {
                    const { data: jobsAfterJobsDelete } = await queryFulfilled;
                    dispatch(api.util.updateQueryData('getJobs',  body.account.accountId, () => jobsAfterJobsDelete));
                } catch {}
            },
        }),

After changing the query into an infinite query, deleting a job with the mutation got the following stack trace

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at getNextPageParam (rtk-query.modern.mjs:1134:27)
    at getHasNextPage (rtk-query.modern.mjs:1768:12)
    at withInfiniteQueryResultFlags (rtk-query.modern.mjs:1712:22)
    at recomputationWrapper (reselect.mjs:647:25)
    at memoized (reselect.mjs:584:21)
    at dependenciesChecker (reselect.mjs:659:39)
    at memoized (reselect.mjs:584:21)
    at collectInputSelectorResults (reselect.mjs:97:47)
    at dependenciesChecker (reselect.mjs:655:36)
    at memoized (reselect.mjs:584:21)

I'm guessing this have to do with the redux state storage no longer being a plain array and the payload of the redux actions no longer being an array...?

However I don't know what the right shape of the redux action should be...?

I tried putting jobsAfterJobsDelete into a pages property of an object like so

                    dispatch(api.util.updateQueryData('getJobs',  body.account.accountId, () => ({ pages: [jobsAfterJobsDelete} })));

but that didn't work (what I hoped for was that this would just reload the first page and clear the rest of the loaded pages).

So I would presumably need to keep track of the pages that contained deleted jobs and return those pages (and all already loaded pages following them...?)

At this time my mind melted down and I just swapped the updateQueryData() for invalidation of tags (which works perfectly with refresh, even with multiple deletions in multiple loaded pages): steinarb/ukelonn@d7a05bb

But as I write this and I see that there is one thing I didn't try, and that was to add a pageParams: [0]. i.e. like this:

        postJobsDelete: builder.mutation({
            query: body => ({ url: '/admin/jobs/delete', method: 'POST', body }),
            async onQueryStarted(body, { dispatch, queryFulfilled }) {
                try {
                    const { data: jobsAfterJobsDelete } = await queryFulfilled;
                    dispatch(api.util.updateQueryData('getJobs',  body.account.accountId, () => ({ pages: [jobsAfterJobsDelete], pageParams: [0] })));
                } catch {}
            },
        }),

And this did indeed work like I had hoped when wrapping the return in pages: [jobsAfterJobsDelete].

But invalidating the tags works much smoother especially when I delete stuff in pages beyond the first one.

So I'll stay with invalidating tags, but now I at least know how to update a page or set of pages if I am able to keep track of which one I should return, alternatively: how to just replace the currently loaded pages with a fresh version of the first page.

So thanks for making me think about this one more time! 😄