T
TanStack•7d ago
mute-gold

Hydration error when streaming data from data loader

Hello, I am facing an hydration error when I try to use an unresolved promise in the route loader. It happens on page load, not on hmr. I was doing some basic tests so the code is very close to the boilerplate : 
const postsFetcher = () => {
    const posts = [{ title: 'Monday' }, { title: 'Tuesday' }, { title: 'Wednesday' }]
    const postsPromise = new Promise<Post[]>((resolve) => setTimeout(() => resolve(posts), 15000))
    return postsPromise;
}

const fetchPosts = createServerFn({
  method: 'GET'
}).handler(async () => await postsFetcher())

export const Route = createFileRoute('/$userId')({
  loader: async ({ params: { userId } }) => {
    const user = await fetchUserProfile({ data: { userId } })
    // No await here
    const posts = fetchPosts();
    return { user, postsPromise: posts }
  },
  component: UserProfilePage
})
const postsFetcher = () => {
    const posts = [{ title: 'Monday' }, { title: 'Tuesday' }, { title: 'Wednesday' }]
    const postsPromise = new Promise<Post[]>((resolve) => setTimeout(() => resolve(posts), 15000))
    return postsPromise;
}

const fetchPosts = createServerFn({
  method: 'GET'
}).handler(async () => await postsFetcher())

export const Route = createFileRoute('/$userId')({
  loader: async ({ params: { userId } }) => {
    const user = await fetchUserProfile({ data: { userId } })
    // No await here
    const posts = fetchPosts();
    return { user, postsPromise: posts }
  },
  component: UserProfilePage
})
Then in the component : const { user, postsPromise } = Route.useLoaderData() and : 
      <Suspense fallback={<i>Loading...</i>}>
        <ul>
          {postsPromise.then((posts) => posts.map((post, i) => (
            // Hydration error happens here
            <li key={i}>{post.title}</li>
          )))}
        </ul>
      </Suspense>
      <Suspense fallback={<i>Loading...</i>}>
        <ul>
          {postsPromise.then((posts) => posts.map((post, i) => (
            // Hydration error happens here
            <li key={i}>{post.title}</li>
          )))}
        </ul>
      </Suspense>
Do you know why I am getting this error? I was thinking this was basic usage of streaming, but I may have put stuff together in the wrong way as those are my first steps with TS start and TS router. Thank you!
2 Replies
eastern-cyan
eastern-cyan•7d ago
you need to either use Await or reacts use in the component
mute-gold
mute-goldOP•7d ago
thank you very much! sorry this one was dumb 🫣 my bad

Did you find this page helpful?