Example use with infinitqueries

[acbeni]

Hello, i was trying to you this nice framework with Infinite Queries, but couldn't figure out how, is there a use example?

Thanks in advance

[lukemorales]

Registering for the future, as I've answered this on #27 before: here's a quick repro of how to use it with Infinite Queries:
https://codesandbox.io/s/compassionate-resonance-nxt2tp?file=/pages/index.js

[acbeni]

Thank you @lukemorales

[0llirocks]

Having the same question here, but the codesandbox link doesn't work (for me). @lukemorales or someone else, could you please add an example here on github or post a new link?
Thank you in advance!

[AnnaYuS]

there is a ts error on the options passed to useInfiniteQuery when used with typescript unfortunately https://codesandbox.io/p/devbox/scwtsn
@lukemorales do you have any plans on making it work with queryOptions ?

[Miguel-A-Jara]

It seems like the example with useInfiniteQueries has stopped working in TanStack Query v5.x
I wonder if this is something that will be worked on in the near future? @lukemorales

[dima-jabali]

I believe I've found a way to use it with typescript:

"bot-conversation-message-list-page": (
  botConversationId: BotConversationId,
) => ({
  queryFn: ({
    pageParam,
  }: {
    pageParam: GetBotConversationMessagesPageRequest; // <-- Explicitly type it here!!!
  }) => api.get["bot-conversation-message-list-page"](pageParam),
  queryKey: [botConversationId],
})

import {
	useSuspenseInfiniteQuery,
	type InfiniteData
} from "@tanstack/react-query";

export type GetBotConversationMessagesPageRequest = {
	/** If not present, will be as 'true'. */
	botConversationId: BotConversationId;
	visible_to_user?: "true" | "false";
	offset: number;
	limit: number;
};

export type GetBotConversationMessagesPageResponse = {
	results: Array<BotConversationMessage>;
	num_results: number;
	offset: number;
	limit: number;
};

type BotConversationMessageListPageInfiniteResponse = InfiniteData<
	GetBotConversationMessagesPageResponse,
	GetBotConversationMessagesPageRequest
>;

export function useFetchBotConversationMessageListPage<
	SelectedData = BotConversationMessageListPageInfiniteResponse,
>(select: SelectedBotConversationMessageListPage<SelectedData>) {
	useFetchBotConversation();

	const botConversationId = useGeneralStoreBotConversationId();

	if (!isValidNumber(botConversationId)) {
		shouldNeverHappen("notebookMetadataBotConversationId not defined!");
	}

	const { queryOptions, initialPageParam } = useMemo(() => {
		const initialPageParam: GetBotConversationMessagesPageRequest = {
			visible_to_user: "true",
			botConversationId,
			limit: 100,
			offset: 0,
		};

		const queryOptions =
			queryKeyFactory.get["bot-conversation-message-list-page"](
				botConversationId,
			);

		return { queryOptions, initialPageParam };
	}, [botConversationId]);

	return useSuspenseInfiniteQuery({
		refetchOnWindowFocus: false,
		refetchOnMount: false,
		gcTime: Infinity, // Maintain on cache
		initialPageParam,
		...queryOptions,
		select,
		getNextPageParam: (lastPage, _allPages, lastPageParams) => {
			const nextOffset = lastPageParams.offset + lastPageParams.limit;

			if (lastPage && nextOffset > lastPage.num_results) return;

			return { ...lastPageParams, offset: nextOffset };
		},
		getPreviousPageParam: (_firstPage, _allPages, firstPageParams) => {
			const prevOffset = firstPageParams.offset - firstPageParams.limit;

			if (prevOffset < 0) return;

			return { ...firstPageParams, offset: prevOffset };
		},
	});
}