T
TanStack•3y ago
robust-apricot

React query prefetching does not work properly

Hey everyone, I am prefetching data in React query on server side using getStaticProps. But even after that on frontend react query again fetches data because of which I see stale data for a second and then it updates due to fetching on frontend side. How to prevent this issue?
1 Reply
robust-apricot
robust-apricotOP•3y ago
const getAllBlogsQueryFn: GetAllBlogsQueryFn = async ({ pageParam }) => {
    const response = await getAllBlogs(pageParam);
    return {
        blogs: response.map(
            (blog) =>
                ({
                    id: blog.slug,
                    title: blog.title as string,
                    desc: blog.excerpt as string,
                    featureImage: blog.feature_image as string,
                } satisfies Blog)
        ),
        nextPage: response.meta.pagination.next,
    };
};

const Blogs = () => {
    const getAllBlogsQuery = useInfiniteQuery({
        queryKey: ["getAllBlogs"],
        queryFn: getAllBlogsQueryFn,
        refetchOnWindowFocus: false,
        getNextPageParam: (lastPage) =>
            typeof lastPage.nextPage === "number"
                ? lastPage.nextPage
                : undefined,
    });
    return (
        <div className="my-14 xs:my-20 px-8 xs:px-16">
            <BlogsHeader />
            <BlogCards {...getAllBlogsQuery} />
        </div>
    );
};

export const getStaticProps: GetStaticProps = async () => {
    await queryClient.prefetchInfiniteQuery({
        queryKey: ["getAllBlogs"],
        queryFn: getAllBlogsQueryFn,
        getNextPageParam: (lastPage) =>
            typeof lastPage.nextPage === "number"
                ? lastPage.nextPage
                : undefined,
    });

    const dehydratedState = dehydrate(queryClient);

    return {
        props: {
            dehydratedState: JSON.parse(JSON.stringify(dehydratedState)),
        },
        revalidate: 60,
    };
};

export default Blogs;
const getAllBlogsQueryFn: GetAllBlogsQueryFn = async ({ pageParam }) => {
    const response = await getAllBlogs(pageParam);
    return {
        blogs: response.map(
            (blog) =>
                ({
                    id: blog.slug,
                    title: blog.title as string,
                    desc: blog.excerpt as string,
                    featureImage: blog.feature_image as string,
                } satisfies Blog)
        ),
        nextPage: response.meta.pagination.next,
    };
};

const Blogs = () => {
    const getAllBlogsQuery = useInfiniteQuery({
        queryKey: ["getAllBlogs"],
        queryFn: getAllBlogsQueryFn,
        refetchOnWindowFocus: false,
        getNextPageParam: (lastPage) =>
            typeof lastPage.nextPage === "number"
                ? lastPage.nextPage
                : undefined,
    });
    return (
        <div className="my-14 xs:my-20 px-8 xs:px-16">
            <BlogsHeader />
            <BlogCards {...getAllBlogsQuery} />
        </div>
    );
};

export const getStaticProps: GetStaticProps = async () => {
    await queryClient.prefetchInfiniteQuery({
        queryKey: ["getAllBlogs"],
        queryFn: getAllBlogsQueryFn,
        getNextPageParam: (lastPage) =>
            typeof lastPage.nextPage === "number"
                ? lastPage.nextPage
                : undefined,
    });

    const dehydratedState = dehydrate(queryClient);

    return {
        props: {
            dehydratedState: JSON.parse(JSON.stringify(dehydratedState)),
        },
        revalidate: 60,
    };
};

export default Blogs;
This is the code that I have. You can clearly see data being prefetched getStaticProps revalidated after 40 secs. And on the frontend you can see useInfiniteQuery that causes client side fetching. So I want that prefetched data should not be fetched again. actually nvm guys when i pushed and built it no longer happens

Did you find this page helpful?