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()

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!

TanStack•7mo ago•

2 replies

then-purple

Hydration error when streaming data from data loader

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()

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>

Hydration error when streaming data from data loader

Similar Threads

Hydration error when streaming data from data loader

Similar Threads

Similar Threads

Similar Threads