Infinite query fetchNextPage modifies first page's data

[Eesa2323]

I have a mutation where I append a comment to the first page (pages[0]). In my onMutate, I cancel any ongoing refetches (if we're not fetching a subsequent page) and then refetch in onSettled

Mutation:

        const createCommentMutation = useMutation({
        mutationFn: createComment,
        onMutate: async (variables) => {
            const { text, replyTo } = variables
            const cacheKey = replyTo ? ["postReplyComments", replyTo] : ["postComments", post._id]

            let wasFetchingFirstPage
            const query = queryClient.getQueryCache().find({ queryKey: cacheKey })
            if (query) {
                const observer = query.observers[0]
                const result = observer.getCurrentResult()

                wasFetchingFirstPage = result.isFetching && !result.isFetchingNextPage
            }

            wasFetchingFirstPage && queryClient.cancelQueries({ queryKey: cacheKey })

            const tempCommentId = uuidV4()
            const creatorData = {
                _id: userData._id,
                username: userData.username,
                profilePic: userData.profilePic,
            }
            const pendingComment = {
                _id: tempCommentId,
                createdAt: new Date().toISOString(),
            }

            queryClient.setQueryData(cacheKey, (prevData) => {
                return produce(prevData, (draft) => {
                    const page = draft.pages[0]
                    page.comments.unshift(pendingComment)

                    if (wasFetchingFirstPage) page.pendingRefetch = true
                })
            })

            updateReply(null)
            textRef.current.value = ""

            return { pendingComment, cacheKey, wasFetchingFirstPage }
        },
        onSuccess: (data, variables, context) => {
            const { pendingComment, cacheKey } = context
            const { comment } = data
            // Optimistically replace comment in onsuccess
            queryClient.setQueryData(cacheKey, (prevData) => {
                return produce(prevData, (draft) => {
                    const page = draft.pages[0]
                    const pendingIndex = page.comments.findIndex(
                        (c) => c._id === pendingComment._id
                    )
                    const data = { ...comment, creator: pendingComment.creator }
                    page.comments[pendingIndex] = data
                })
            })
        },
        onSettled: (_, __, ___, context) => {
            const { cacheKey, wasFetchingFirstPage } = context

            const refetchType = wasFetchingFirstPage ? "active" : "none"
            queryClient.invalidateQueries({ queryKey: cacheKey, refetchType })

            if (wasFetchingFirstPage) {
                queryClient.setQueryData(cacheKey, (prevData) => {
                    return produce(prevData, (draft) => {
                        if (!prevData) return

                        const page = draft.pages[0]
                        page.pendingRefetch = false
                    })
                })
            }
        },
    })

My Query:

useInfiniteQuery({
            queryKey: ["postReplyComments", commentId],
            queryFn: fetchCommentReplies,
            initialPageParam: undefined,
            getNextPageParam: (lastPage) => lastPage.nextCursor,
            enabled,
            retry: false,
        })

The issue is when I call fetchNextPage() in my component, and whilst isFetchingNextPage is true, when I add a comment, and fetching completes, any comments added during this period are removed. My cursors are correct and pagination works as expected when I don't create any comments during this time.

I'm under the impression fetchNextPage() just appends a page to the pages array, however it is clearly modifying the first page. I can confirm invalidateQueries in onSettled is not the issue, as I've removed it and the issue persists. Also, I don't want to cancelQueries if we're fetching the next page.

[TkDodo]

I'm under the impression fetchNextPage() just appends a page to the pages array

yes, that’s true, code for that is here:

query/packages/query-core/src/infiniteQueryBehavior.ts

Lines 77 to 80 in f86eb7e

	return {
	pages: addTo(data.pages, page, maxPages),
	pageParams: addTo(data.pageParams, param, maxPages),
	}

however it is clearly modifying the first page

pretty sure it’s not. please show a minimal reproduction. it’s very likely you that’s implicitly modifying something. maybe you’ve forgotten produce somewhere and mutate some state directly instead, but I need to see it.

[Eesa2323]

Sure, here: https://codesandbox.io/p/sandbox/v4rtnd?file=%2Fsrc%2FComment.js%3A79%2C1-80%2C1

Please see App.js for steps to reproduce.

[TkDodo]

the reproduction helps, it’s the first time that you are mentioning doing a write to the queryCache while a fetch is going on:

// 2 - CLICK LOAD MORE AND THEN IMMEDIATELY CLICK ADD COMMENT

it’s pretty much the reason why queryClient.cancelQueries() should be done when doing an optimistic update - because refetches would otherwise overwrite them.

fetcNextPage / fetchPreviousPage get the current state values passed when the fetch starts:

query/packages/query-core/src/infiniteQueryBehavior.ts

Line 18 in f86eb7e

const oldPages = context.state.data?.pages || []

and the actual write uses them to append / prepend. If those things change in the meantime (due to a manual write with setQueryData), that would indeed be lost. I don’t think we can just read the last values before writing, as that might create inconsistencies when e.g. fetching multiple pages. I’m not 100% sure though, we could think about an exception for fetching next or previous pages, but I need to think about it.

[Eesa2323]

Ah ok, makes sense. My question would be when cancelling the query, whilst fetching next page, obviously it would cancel the fetch, but in on settled if I call invalidate or refetch, it will refetch the current pages in the cache (not the page that was pending fetch at time of cancellation).

Is there a way I can use query client to fetch the next page of the query if fetchnextpage was cancelled during the mutation? As mentioned, invalidate queries or refetchqueries are not useful here. The only other solution I can think would be storing a state variable for newly added comments and separate them from the cache.

[TkDodo]

fetchNextPage is just fetch with a forward direction:

query/packages/query-core/src/infiniteQueryObserver.ts

Lines 122 to 131 in 1b54538

	fetchNextPage(
	options?: FetchNextPageOptions,
	): Promise<InfiniteQueryObserverResult<TData, TError>> {
	return this.fetch({
	...options,
	meta: {
	fetchMore: { direction: 'forward' },
	},
	})
	}

so yes, I think you can grab the query from the cache with queryClient.getQueryCache.find(...) and then call .fetch on it.

[Eesa2323]

Interesting, I attempted query.fetch with the meta provided above, however it seems to just fetch the first page usinginitialPageParam. I also attempted to spread query.options inside the .fetch config, however the same thing happened.

    const query = queryClient.getQueryCache().find({ queryKey: cacheKey })
    query.fetch({
          // Tried with and without this line below
          ...query.options,
          meta: {
               fetchMore: {
                     direction: "forward",
               },
          },
     })