useLazyXXXQuery and upsertQueryData

[MaximKondratev]

I am trying to implement basic infinite scrolling using useLazyQuery + the combination of serializeQueryArgs, merge and forceRefetch.

const recommendationsApi = api.injectEndpoints({
    endpoints: (builder) => ({
        getRecommendations: builder.query<RecommendationsList, { page: number }>({
            query: () => ({
                url: 'path/to/my/ep',
                credentials: 'include',
            }),
            serializeQueryArgs: ({ endpointName }) => {
                return { endpointName };
            },
            merge: (currentCache, newItems) => {
                currentCache.push(...newItems);
            },
            forceRefetch({ currentArg, previousArg }) {
                return currentArg !== previousArg;
            },
        }),
    }),
});

export { recommendationsApi };

export const { useLazyGetRecommendationsQuery } = recommendationsApi;

But I also have initial data for the first page and I want to upsert it with upsertQueryData on store setup:

await store.dispatch(recommendationsApi.util.upsertQueryData('getRecommendations', { page: 1 }, recommendations));

And then render it with lazy query

const RecommendationsList: FC = () => {
    const [getRecommendations, result] = useLazyGetRecommendationsQuery();
    
    return ...
}

I expect lazy query to return that upserted data for first render, but it is undefined and status is uninitialized.

---

While I was writing this I also found #4213 where it states this behavior is intended. But I'm not sure why query does not read any data if it exists.

Then I found Infinite Query draft #4738 and decided to submit the issue to ask for initial data support if possible.

[markerikson]

@MaximKondratev You ought to be able to use upsertQueryEntries to prefill the cache entry for an infinite query endpoint per that draft PR, but it's up to you to make sure the data ({pages, pageParams}) is structured correctly.