[useInfiniteQuery] Query data doesn't update even though queryFn has been called

[dr-zr]

Hello everyone,

I'm using tanstack-query v4 (@tanstack/[email protected]) inside my Expo chat app.
I use the infinite query to fetch messages in a channel.
I invalidate all the messages queries when a new message is received such that the query cache is marked as stale thus forces the query to refetch when a user opens a chat.

I invalidate the messages by calling:

MessagesQuery.invalidate() // this call will trigger queryClient.invalidateQueries(keys.all) 

However, there's a case in which the query function gets called, but the query data remains stale That happens when the user isn't on the chat screen (query is inactive).

Below you can see how my MessagesQuery looks like:

// This is the maximum number of pages to keep in the infinite query
const maxPagesToKeep = 3;

export namespace MessagesQuery {
    export const keys = {
        all: ["communication/useMessages"] as const,
        channel: (channelId: string, messageId = 0) =>
            [...keys.all, { channelId }, { messageId }] as const,
    };

    export const invalidate = (
        channelId?: string,
        filters?: InvalidateQueryFilters<readonly Message[]>,
    ) => {
        if (!channelId) {
            return queryClient.invalidateQueries(keys.all);
        }

        // Cut off redundant pages from the infinite query
        // This way we won't have to wait for all the pages to refetch when we invalidate the query
        // Thus the user will see all UI updates faster
        InfiniteQueryService.cutOffRedundantPagesFromInfiniteQuery(
            () => MessagesQuery.getData(channelId),
            (data) => MessagesQuery.setData(keys.channel(channelId), data),
            maxPagesToKeep,
        );

        return queryClient.invalidateQueries({
            queryKey: keys.channel(channelId),
            ...filters,
        });
    };

  

    type QueryData = InfiniteData<readonly Message[]>;

    export const getData = (channelId: string, messageId?: number) => {
        return queryClient.getQueryData<QueryData>(
            keys.channel(channelId, messageId),
        );
    };

    export const setData = (key: readonly unknown[], data: QueryData) => {
        return queryClient.setQueryData<QueryData>(key, data);
    };

    export const pageLimit = 15;

    export const useQuery = (
        channelId: string,
        messageId?: number,
        options: UseInfiniteQueryOptions<readonly Message[]> = = {
            enabled: true,
        }
    ) => {
        const isDisconnected = useIsDisconnected();

        const queryInfo = useInfiniteQuery<readonly Message[]>({
            ...options,
            queryKey: keys.channel(channelId, messageId),
            enabled:
                !isDisconnected && options?.enabled && Boolean(api.getToken()),
            getNextPageParam: (lastPage): number | undefined => {
                if (!lastPage) return undefined;
                return last(lastPage)?.id;
            },
            queryFn: async ({ pageParam: lastMessageId }) => {
                const messages = await api.communication.getMessages(
                    channelId,
                    pageLimit,
                    lastMessageId,
                    messageId,
                );

                // After messages have been fetched, check if channels need to be invalidated
                // Use case: When a user receives a notification, channels need to refetch after the messages from a channel have been fetched,
                // since the channel.unreadCount will be updated only after the messages have been fetched
                // otherwise the unread count will be incorrect
                const notificationFlags = useNotificationFlagsStore.getState();
                if (notificationFlags.value.invalidateChannels) {
                    ChannelsQuery.invalidate();
                    notificationFlags.update({ invalidateChannels: false });
                }

                const orderedMessages = [];

                for (let i = 0; i < messages.length; i++) {
                    const firstMessage = messages[i];
                    const secondMessage = messages[i + 1];

                    if (!secondMessage) {
                        orderedMessages.push(firstMessage);
                        break;
                    } else if (
                        // This is necessary since the FlatList is inverted and system messages are displayed after the regular messages
                        firstMessage.createdAt === secondMessage.createdAt &&
                        firstMessage.isSystemMessage &&
                        !secondMessage.isSystemMessage
                    ) {
                        orderedMessages.push(secondMessage);
                        orderedMessages.push(firstMessage);
                        i++;
                    } else {
                        orderedMessages.push(firstMessage);
                    }
                }

                return orderedMessages;
            },
        });

    
        return {
            ...queryInfo,
            data: {
                ...queryInfo.data,
                pages: queryInfo.data?.pages.flat() ?? [],
            },
        };
    };
}

When I add a log to display the newest message in the queryFn I can see that the new data is fetched, while the same log on dataFlattened returns the old message

queryClient configuration:

export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: INTERVALS.ms1h * 5,
            cacheTime: INTERVALS.ms1h * 5,
            keepPreviousData: true,
        },
    },
});

export const persister = createAsyncStoragePersister({
    storage: AsyncStorage,
});

From what I could understand, it looks like the pageParams issue occurs because the first page doesn't get updated.
The first-page param is null , and even though the data for that page has changed, it doesn't invalidate other page params and thus keeps the cache the same 🤔

[dr-zr]

I was able to solve the issue. It was because next page was fetching while the whole query was refeteched. Here's the whole breakdown

1. Messages are rendered in a FlatList
2. There was an onEndReached callback that calls messagesQuery.fetchNextPage
3. I've added an optimization that displays up to 10 first messages while the screen is transitioning. After the transition has ended other messages are displayed.
4. Since all 10 messages are rendered on the screen, the onEndReachedCb was called during transition, every time the screen was opened. This resulted in many redundant pages being fetched, even though the user didn't scroll nearly to the end
5. When the messages query was invalidated, and the user opened the screen, a new page was fetched, while all other pages were refetched. I'm not sure what would happen in this case but it resulted in inconsistent query data 😅 (maybe the TanstackQuery wizard himself @TkDodo could explain what happenes in TanStack Query in this case)

I solved the issue by adding a check that would only attach onEndReachedCb after the transition has ended:

onEndReached={hasTransitionEnded ? fetchMoreMessages : null}

[mkeyy0]

Thank you, man. I was trying to fix this issue all day, you showed me the way to look into it.

For me, the issue was similar, I was fetching the next page even if there were no more available pages to fetch, adding the check solved the issue for me