How to properly check the contents of prefetched data?
I have dynamic route with SSG and if coming product slug is not in db I want to return notFound: true after prefetching. How to do it the right way? Right now I'm doing it like this but it looks like hack
export const getStaticProps: GetStaticProps = async (ctx) => {
const ssg = await createServerSideHelpers({
router: appRouter,
ctx: await createContext(),
transformer: superjson,
});
await ssg.public.product.prefetch({
slug: ctx.params?.slug as string,
});
const product = ssg.dehydrate().json.queries[0].state.data;
if (!product) {
return {
notFound: true,
};
}
return {
props: {
trpcState: ssg.dehydrate(),
slug: ctx.params?.slug,
},
};
};1 Reply
I haven’t played with this use case, but conceptually prefetching is just there to prime the cache. Any handling of the resulting state should be done in components as if you hadn’t prefetched. Prefetching itself is an optimisation to prevent waterfalls