Using prefetchInfiniteQuery and useInfiniteQuery

[alfredosdpiii]

I want to combine prefetchInfiniteQuery and then useInfiniteQuery to get nextPage

Here's my page.tsx

'use server';

import React from 'react';
import MainCategoriesModule from '../modules/main-categories/main-categories-module';
import { getCategories } from '@/actions/categories';
import { getParentCategories } from '@/actions/categories';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { getQueryClient } from '@/utils/query';

const MainCategories = async () => {
   
    const queryClient = getQueryClient();

    await queryClient.prefetchInfiniteQuery({
        queryKey: ['categories'],
        initialPageParam: 1,
        queryFn: async ({ pageParam }) => {
            console.log(pageParam);
            const categories = await getCategories(pageParam);
            if (categories.error) throw new Error(categories.error);
            if (categories.success) return categories.success;
        },
        getNextPageParam: (lastPage: any) => lastPage.nextCursor,
        maxPages: 3
    });

    await queryClient.prefetchQuery({
        queryKey: ['parentCategories'],
        queryFn: async () => {
            const parentCategories = await getParentCategories();
            if (parentCategories.error) throw new Error(parentCategories.error);
            if (parentCategories.success) return parentCategories.success;
        }
    });
    return (
        <div className="mt-10 px-8 pb-10 flex flex-col gap-6">
            <HydrationBoundary state={dehydrate(queryClient)}>
                <MainCategoriesModule />
            </HydrationBoundary>
        </div>
    );
};

export default MainCategories;

right now here's how we fetch the pages

'use client';
import { useEffect, useState } from 'react';
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbSeparator
} from '@/components/ui/breadcrumb';
import Plus from '@/assets/svgs/plus.svg';
import ArrowLeft from '@/assets/svgs/arrow-left.svg';
import AddCategoryModal from '@/modals/addCategoryModal';
import EditCategoryModal from '@/modals/editCategoryModal';
import DeleteCategoryModal from '@/modals/deleteCategoryModal';
import Pen from '@/assets/svgs/pen.svg';
import Trash from '@/assets/svgs/trash2.svg';
import Search from '@/assets/svgs/search.svg';
import Sort from '@/assets/svgs/sort.svg';
import Upload from '@/assets/svgs/upload.svg';
import Download from '@/assets/svgs/download.svg';
import { Table } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { addCategory, deleteCategory, editCategory, getCategories } from '@/actions/categories';
import { getParentCategories } from '@/actions/categories';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { format } from 'date-fns';
import { Pagination } from '@/components/ui/pagination';

type Categories = {
    items: [];
    links: Record<string, any>;
    meta: Record<string, any>;
};

type Category = {
    id: number;
    name: string;
    description: string;
    active: boolean;
    parent_id: number | null;
};

type CategoryParams = {
    name: string;
    description: string;
    active: boolean;
    parent_id: number | null;
};

const MainCategoriesModule: any = ({
    categories,
    parentCategories
}: {
    categories: Categories;
    parentCategories: Categories;
}) => {
    const [page, setPage] = useState<number>(0);
    const [size, setSize] = useState<number>(12); // default size
    const [isLoading, setIsLoading] = useState<boolean>(false);

    const queryClient = useQueryClient();
    const {
        data: categoriesData,
        error: categoriesError,
        isFetching: isCategoriesFetching,
        isLoading: isCategoriesLoading
    } = useQuery({
        queryKey: ['categories', page],
        queryFn: async () => {
            const categories = await getCategories(page);
            if (categories.error) throw new Error(categories.error);
            if (categories.success) return categories.success;
        }
    });

    const { data: parentCategoriesData, error: parentCategoriesError } = useQuery({
        queryKey: ['parentCategories'],
        queryFn: async () => {
            const parentCategories = await getParentCategories();
            if (parentCategories.error) throw new Error(parentCategories.error);
            if (parentCategories.success) return parentCategories.success;
        }
    });

    const addCategoryMutation = useMutation({
        mutationFn: addCategory,
        onSuccess: (newCategory) => {
            queryClient.setQueryData(['categories'], (oldData: any) => {
                return {
                    ...oldData,
                    items: [newCategory, ...oldData.items]
                };
            });
        },
        onError: (error) => {
            console.log(error);
        }
    });

    const editCategoryMutation = useMutation<
        Category,
        unknown,
        { id: number; bodyParams: CategoryParams }
    >({
        mutationFn: ({ id, bodyParams }) => editCategory({ id, bodyParams }),
        onSuccess: (editedCategory) => {
            queryClient.setQueryData(['categories'], (oldData: Categories | undefined) => {
                if (oldData) {
                    const updatedItems = oldData.items.map((item: Category) =>
                        item.id === editedCategory.id ? editedCategory : item
                    );
                    return {
                        ...oldData,
                        items: updatedItems
                    };
                }
                return oldData;
            });
        },
        onError: (error) => {
            console.log(error);
        }
    });

    const deleteCategoryMutation = useMutation<void, unknown, number>({
        mutationFn: (id) => deleteCategory(id),
        onSuccess: async () => {
            await queryClient.invalidateQueries({ queryKey: ['categories'] });
        },
        onError: (error) => {
            console.log(error);
        }
    });

    const [showAdd, setShowAdd] = useState<boolean>(false);
    const [showEdit, setShowEdit] = useState<boolean>(false);
    const [showDelete, setShowDelete] = useState<boolean>(false);

    const [category, setCategory] = useState<object>({});

    // category columns
    const columns = [
        {
            title: 'Category',
            key: 'name'
        },
        {
            title: 'Parent Category',
            key: 'parent_id',
            render: ({ row }: any) => <span>{row.parent?.name}</span>
        },
        {
            title: 'Status',
            key: 'active',
            render: ({ row }: any) => (
                <div>
                    {row.active ? (
                        <span className="text-prestige-green">Active</span>
                    ) : (
                        <span className="text-prestige-red">Inactive</span>
                    )}
                </div>
            )
        },
        {
            title: 'Last Update',
            key: 'updated_at',
            render: ({ row }: any) => (
                <span>{format(new Date(row.updated_at), 'yyyy/MM/dd HH:mm a')}</span>
            )
        },
        {
            title: 'Action',
            key: 'action',
            headerClassName: 'text-right',
            render: ({ row }: any) => (
                <div className="flex flex-row justify-end gap-2">
                    <Button
                        icon={Pen}
                        label=""
                        className="bg-prestige-dark-white px-4"
                        onClick={() => {
                            setShowEdit(true);
                            setCategory(row);
                        }}
                    />
                    <Button
                        icon={Trash}
                        label=""
                        className="bg-prestige-dark-white px-4"
                        onClick={() => {
                            setShowDelete(true);
                            setCategory(row);
                        }}
                    />
                </div>
            )
        }
    ];

    const handleSetPage = async (newPage: number) => {
        setPage(newPage);
    };

    useEffect(() => {
        if (page > 0) {
            setIsLoading(true);
            queryClient.prefetchQuery(['categories', page]).then(() => {
                setIsLoading(false);
            });
        }
    }, [page, queryClient]);

    return (
        <>
            <div className="flex flex-row gap-4 items-center  justify-between">
                <div className="flex flex-row gap-4 items-center text-3xl font-semibold">
                    <ArrowLeft className="text-prestige-gray-800" />
                    <Breadcrumb>
                        <BreadcrumbList className="text-2xl font-semibold">
                            <BreadcrumbItem>
                                <BreadcrumbLink href="/">Categories</BreadcrumbLink>
                            </BreadcrumbItem>
                            <BreadcrumbSeparator className="text-prestige-gray-800">
                                /
                            </BreadcrumbSeparator>
                            <BreadcrumbItem>
                                <BreadcrumbLink
                                    href="/main-categories"
                                    className="text-prestige-gray-800"
                                >
                                    Main Categories
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                        </BreadcrumbList>
                    </Breadcrumb>
                </div>
                <Button
                    label="Add Main Category"
                    icon={Plus}
                    className="text-lg h-14 normal-case rounded-xl font-semibold bg-prestige-blue text-prestige-white"
                    onClick={() => setShowAdd(true)}
                />
            </div>

            {/* Filters */}
            <div className="flex flex-row justify-between">
                <div className="flex flex-row gap-2">
                    <Button
                        icon={Upload}
                        label="Batch Upload"
                        className="px-6 border border-prestige-blue !text-prestige-blue"
                    />
                    <Button
                        icon={Download}
                        label="CSV"
                        className="px-6 border border-prestige-blue !text-prestige-blue"
                    />
                    <Button
                        icon={Download}
                        label="Template"
                        className="px-6 border border-prestige-blue !text-prestige-blue"
                    />
                </div>

                {/* Global Search */}
                <div className="flex flex-row gap-1.5">
                    <div className="relative">
                        <Input
                            type="text"
                            placeholder="Search"
                            value={''}
                            // onChange={(e) => setFiltering(e.target.value)}
                            className="border border-prestige-gray rounded-xl text-lg"
                        />
                        <Search className="absolute bottom-[1.1rem] right-5 text-prestige-gray-800" />
                    </div>
                    <Button label="" icon={Sort} className="bg-prestige-dark-white px-4 h-[56px]" />
                </div>
            </div>

            {/* Categories Table */}
            {!isCategoriesFetching ? (
                categoriesData ? (
                    <div className="table-auto border shadow-2xl rounded-[20px] px-4 flex flex-col items-center">
                        <Table columns={columns} data={categoriesData?.items} />
                        <Pagination
                            size={size}
                            page={page}
                            count={categoriesData.meta.totalItems}
                            onSetPage={handleSetPage}
                            isLoading={isLoading}
                        />
                    </div>
                ) : (
                    <div>No categories found.</div>
                )
            ) : (
                <div>Loading...</div>
            )}

            {/* Add Category Modal */}
            <AddCategoryModal
                categoriesData={categoriesData?.items}
                parentCategoriesData={parentCategoriesData?.items}
                visible={showAdd}
                onClose={() => setShowAdd(false)}
                mutation={addCategoryMutation}
            />

            {/* Edit Category Modal */}
            <EditCategoryModal
                category={category}
                parentCategoriesData={parentCategoriesData?.items}
                visible={showEdit}
                onClose={() => setShowEdit(false)}
                mutation={editCategoryMutation}
            />

            {/* Delete Category Modal */}
            <DeleteCategoryModal
                category={category}
                visible={showDelete}
                onClose={() => setShowDelete(false)}
                mutation={deleteCategoryMutation}
            />
        </>
    );
};

export default MainCategoriesModule;

Is it possible? or will using useInfiniteQuery rewrite the cache?

[TkDodo]

sorry there's a lot of seemingly unrelated code. Generally, prefetching infinite queries on the server should work. If it doesn't for you, please show a minimal runnable reproduction with stackblitz or codesandbox. thanks.