provincial-silver

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;

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

13 Replies

wise-white•3y ago

queryFn: () => dataPagination looks wrong, like your queryFn returns another function

provincial-silverOP•3y ago

@TkDodo 🔮 here is my queryFn, i move it to fetch.ts

export async function dataPagination(): Promise<PropsPage> {
  const pageNumber = 1;
  const pageSize = 6;
  const res = await fetch(
    process.env.NEXT_PUBLIC_STRAPI_URL +
    "/api/posts?populate=*&pagination[page]="+pageNumber+"&pagination[pageSize]="+pageSize+"&sort=createdAt:desc"
  );
  const jsonData = await res.json();
  console.log("jsasdfsdfonData", jsonData);
  return { page: pageNumber, ...jsonData } as PropsPage;
}

export async function dataPagination(): Promise<PropsPage> {
  const pageNumber = 1;
  const pageSize = 6;
  const res = await fetch(
    process.env.NEXT_PUBLIC_STRAPI_URL +
    "/api/posts?populate=*&pagination[page]="+pageNumber+"&pagination[pageSize]="+pageSize+"&sort=createdAt:desc"
  );
  const jsonData = await res.json();
  console.log("jsasdfsdfonData", jsonData);
  return { page: pageNumber, ...jsonData } as PropsPage;
}

wise-white•3y ago

it's not about the implementation of it. you have: queryFn: () => dataPagination you want: queryFn: () => dataPagination() or: queryFn: dataPagination the difference is about invoking the function or passing the function

provincial-silverOP•3y ago

tried both of them but still no luck i tried this also but no luck still: queryClient.prefetchQuery(['projects', page],) Hi @TkDodo 🔮 Sorry for mentioning you, do you have some clue or solution for this, i'm still stuck.

wise-white•3y ago

Show it in a codesandbox please

provincial-silverOP•3y ago

https://rb.gy/hizeo here is

CodeSandbox

CodeSandbox is an online editor tailored for web applications.

provincial-silverOP•3y ago

sorry i'm using url shortner, coz there is a limit for the discord. you can check the component at /app/components/BlogList.tsx sorry for my messy code i haven't clean up again.

wise-white•3y ago

you have ReactQueryHydrate, which hydrates into the QueryClient it can see, but then it's children, the BlogListWithPagination component renders its own QueryClientProvider the queryClient is also created outside of the component tree, which is not how the docs describe that you should do it at all it works fine if you remove the inner QueryClientProvider:

const BlogListWithPagination = () => (
  <>
    <BlogList />
    <ReactQueryDevtools initialIsOpen={false} />
  </>
);

const BlogListWithPagination = () => (
  <>
    <BlogList />
    <ReactQueryDevtools initialIsOpen={false} />
  </>
);

but seriously - remove the new QueryClient() from BlogList.tsx the one you are using is defined in Providers.tsx

const [queryClient] = React.useState(() => new QueryClient())

const [queryClient] = React.useState(() => new QueryClient())

you can grab it with useQueryClient() also, you probably want to set a staleTime, otherwise, you'll get a refetch on the client immediately. This is also in the docs

provincial-silverOP•3y ago

ok i will check on this one. here what i do 1. remove QueryClientProvider and new QueryClient in bloglistwithpagination components because like you said it will be hydrated in the Providers 2. but still didnt understand with the in the providers.tsx change

const [queryClient] = React.useState(() => new QueryClient())

const [queryClient] = React.useState(() => new QueryClient())

and use

useQueryClient()

useQueryClient()

instead, do you mean like this?

const queryClient = useQueryClient()

const queryClient = useQueryClient()

but if i check the documentations

const queryClient = useQueryClient({ context })

const queryClient = useQueryClient({ context })

i guess i need to add context but i didnt get what context is it?

provincial-silverOP•3y ago

but i guess it works now, with just fixing by the number 1 1. here is the proof in the

render.png

render.png

the data is still loading but the bloglist already rendered, so the prefetching is working i guess. 2. like you said i guess i need to add stale time because it keep refeching like in the

keep refetching.png

keep refetching.png

thank you very much your your help, thanks for being patience with me 🙂

wise-white•3y ago

you don't need context, it's optional yes you need staleTime, again, it's in the docs: https://tanstack.com/query/v4/docs/react/guides/ssr#staleness-is-measured-from-when-the-query-was-fetched-on-the-server

SSR | TanStack Query Docs

React Query supports two ways of prefetching data on the server and passing that to the queryClient. Prefetch the data yourself and pass it in as initialData

wise-white•3y ago

Because staleTime defaults to 0, queries will be refetched in the background on page load by default. You might want to use a higher staleTime to avoid this double fetching, especially if you don't cache your markup.

provincial-silverOP•3y ago

i have another questions. i encounter weird behaviour, when i go to some page and go back using back button in the browser itself, i had issues with it falls to infinite loop, i already add staletime and cachetime. this only happening in the <Link> components. i have that thread in here https://discordapp.com/channels/719702312431386674/1119972752196112525 this only happening when i go back to page that have client side rendering that handled by tanstack query.

Gaming

Programming

Prefecth in Next.js 13.4 app router is not working

Did you find this page helpful?