T
TanStack•3y ago
extended-salmon

Next.js 13.4 app directory prefetch/hydrate questions

Hi Guys, Alka here Right now i try to build my own personal blogs, preiously i try to make bloglist that has pagination with helps of tanstack query, which right now is working perfectly, but since it became client side components, i have some concen for my blog SEO so i want to use prefetching. I have a questions for how to hydrate the client side components here is my layout.tsx (i attach in the attachement) here is my BlogList.tsx (i attach in the attachement) i also implement the note or issues and its solutions that mentioned in the documentaions 1. providers 2. issues with typescript regarding the Hydrate (i use separate file called HydrateClient.tsx) 
"use client";

import { Hydrate as RQHydrate, HydrateProps} from '@tanstack/react-query'

import React from 'react'

const Hydrate = (props: HydrateProps) => {
  return (
    <RQHydrate {...props}/>
  )
}

export default Hydrate
"use client";

import { Hydrate as RQHydrate, HydrateProps} from '@tanstack/react-query'

import React from 'react'

const Hydrate = (props: HydrateProps) => {
  return (
    <RQHydrate {...props}/>
  )
}

export default Hydrate
3. and use query-core for QueryClient and dehydrate when i import the functions. i get error from my nextjs. here is the error 
- error Error: Not implemented.
    at BlogListWithPagination (./components/BlogList.tsx:29:94)

-  ┌ GET / 200 in 4838ms
   │
   └──── GET API.. 200 in 1081ms (cache: MISS)

- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 73 ms (73 modules)
- error Error: Not implemented.
    at BlogListWithPagination (./components/BlogList.tsx:29:94)

-  ┌ GET / 200 in 4838ms
   │
   └──── GET API.. 200 in 1081ms (cache: MISS)

- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 73 ms (73 modules)

BlogList.tsx

layout.tsx

3 Replies
extended-salmon
extended-salmonOP•3y ago
im so sorry if my code is very messy, i still learn programming in general.
extended-salmon
extended-salmonOP•3y ago
here is the screenshot of my blog page. it is running on my vps server, hence there is no pagination button yet, i haven't deploy it for now. it just for illustrations.
No description
extended-salmon
extended-salmonOP•3y ago
Hi Guys I sucessfully isolate the issues, i follow more the guide from https://tanstack.com/query/v4/docs/react/guides/ssr in nextjs 13 section. so the issues is when i try to hydrate the bloglist here is the components where i hydrate the bloglist. 
import { dehydrate, Hydrate } from '@tanstack/react-query'
import getQueryClient from '@/app/utils/getQueryClient'
import BlogListWithPagination from './BlogList'
import { useState } from 'react';

export default async function HydratedPosts() {
    const [page, setPage] = useState(1);
    const pageSize = 6;
    const fetchProjects = () => {
        return fetch(process.env.NEXT_PUBLIC_STRAPI_URL +
            `/api/posts?populate=*&pagination[page]=${page}&pagination[pageSize]=${pageSize}&sort=createdAt:desc`)
            .then((res) => res.json());
    };

    const queryClient = getQueryClient()
    await queryClient.prefetchQuery(['projects', page], fetchProjects)
    const dehydratedState = dehydrate(queryClient)

    return (
        <Hydrate state={dehydratedState}>
            <BlogListWithPagination></BlogListWithPagination>
        </Hydrate>
    )

}
import { dehydrate, Hydrate } from '@tanstack/react-query'
import getQueryClient from '@/app/utils/getQueryClient'
import BlogListWithPagination from './BlogList'
import { useState } from 'react';

export default async function HydratedPosts() {
    const [page, setPage] = useState(1);
    const pageSize = 6;
    const fetchProjects = () => {
        return fetch(process.env.NEXT_PUBLIC_STRAPI_URL +
            `/api/posts?populate=*&pagination[page]=${page}&pagination[pageSize]=${pageSize}&sort=createdAt:desc`)
            .then((res) => res.json());
    };

    const queryClient = getQueryClient()
    await queryClient.prefetchQuery(['projects', page], fetchProjects)
    const dehydratedState = dehydrate(queryClient)

    return (
        <Hydrate state={dehydratedState}>
            <BlogListWithPagination></BlogListWithPagination>
        </Hydrate>
    )

}
but i still facing same issues 
- error Error: Not implemented.
    at HydratedPosts (./components/HydratedBlogList.tsx:25:94)
- error Error: Not implemented.
    at HydratedPosts (./components/HydratedBlogList.tsx:25:94)
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

Did you find this page helpful?