fossfighter•16mo ago

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

Nick•16mo ago

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