TanStackT
TanStack•3y ago•
21 replies
brilliant-lime

Prefecth in Next.js 13.4 app router is not working

Hi Guys
Previous post/issues that i was having (https://discordapp.com/channels/719702312431386674/1118803621203681301) is solved now, and now the error is not present anymore.


but now i have another problem, although i already implement the hydrate, this still not working and the prefetch is not firing.

here is the updated code
import { dehydrate } from '@tanstack/react-query';
import getQueryClient from '@/app/utils/getQueryClient';
import BlogListWithPagination from './BlogList';
import ReactQueryHydrate from '@/app/utils/HydrateClient';
import { dataPagination } from '@/app/api/fetch';

const HydratedPosts = async () => {
    const { page } = await dataPagination();
    const queryClient = getQueryClient()
    await queryClient.prefetchQuery({
        queryKey: ['projects', page],
        queryFn: () => dataPagination,
    })

    const dehydratedState = dehydrate(queryClient);

    return (
        <ReactQueryHydrate state={dehydratedState}>
            <BlogListWithPagination />
        </ReactQueryHydrate>
    );
};
export default HydratedPosts;

Screenshot
1.png
2.png
Was this page helpful?