initialData isn't always fresh for some reason #5432
dihmeetree
started this conversation in
General
Replies: 2 comments 2 replies
-
Initial data is the initial data so I think it won't override anything, you might need a hydration boundary rather than passing the data like this (This is more react query territory than trpc if you wanna search for it) |
Beta Was this translation helpful? Give feedback.
2 replies
-
@KATT does this look like a proper way to hydrate? import { Suspense } from "react";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { createServerSideHelpers } from "@trpc/react-query/server";
import superjson from "superjson";
import { appRouter } from "@acme/api";
import { createContext } from "~/trpc/server";
import { CreatePostForm, PostList } from "./components/posts";
import Spinner from "./components/spinner";
async function Posts() {
const helpers = createServerSideHelpers({
router: appRouter,
ctx: await createContext(),
transformer: superjson,
});
await helpers.post.all.prefetch();
const dehydratedState = dehydrate(helpers.queryClient);
return (
<HydrationBoundary state={dehydratedState}>
<PostList />
</HydrationBoundary>
);
}
export default async function HomePage() {
return (
<>
<CreatePostForm />
<Suspense fallback={<Spinner />}>
<div className="w-full max-w-2xl overflow-y-scroll">
<Posts />
</div>
</Suspense>
</>
);
} It seems to now do what I'm looking for, so that's great.. just want to make sure this is the proper implementation. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm using tRPC via Next.js (RSC's specifically)
I have an index route like so (
app/page.tsx
):And a PostList component like so:
I'm getting fresh data from the RSC here (i.e -
await api.post.all()
). But for some reason when the fresh data is getting passed to thePostList
component viainitialData
, the new data isn't being shown.By default
StaleTime
is set to 0, so all data coming intoPostList
viainitialData
should be fresh and used to populate the query cache, no?I want fresh data from the RSC to be used as the
initialData
in theuseSuspenseQuery
. This query should never run on mount.. data supplied to this component always comes from the RSC, so it never has to fetch the data again on the client (unless i'm invalidating it after a mutation).Not sure what i'm doing wrong here.
Note: Data is fresh when I refresh the page, but when navigating between pages... data in
initialData
is cached.Beta Was this translation helpful? Give feedback.
All reactions