TanStackT
TanStack6mo ago
1 reply
worthy-azure

Cannot read properties of undefined (reading 'isDehydrated')! (tRPC)

Suddenly started getting this trpc error which is causing the frontend issue. Sometimes it load the data on try again, but most of it's not working.

error on server logs:
tried to stream query [["images","categoryImageList"],{"input":{"category":"poster","page":1,"perPage":24},"type":"query"}] after stream was already closed.


Loader
loader: async ({ context, params }) => {
    const page = context.page;
    const perPage = context.perPage;
    const slug = params.slug;
    const category = slug.replace(endSlug, "").split("-").join(" ").trim();

    const [_, siteData] = await Promise.all([
      context.queryClient.ensureQueryData(
        context.trpc.images.categoryImageList.queryOptions({
          page,
          perPage,
          category,
        })
      ),
      context.queryClient.ensureQueryData(
        context.trpc.site.getCategoryPageMetaData.queryOptions({
          category: category,
        })
      ),
    ]);

    return {
      category: category || "",
      page: context.page,
      perPage: context.perPage,
      pageData: {
        metaTitle: siteData.metaTitle,
        metaDescription: siteData.metaDescription,
      },
    };
  },


using this to fetch the data:
const trpc = useTRPC();
  const [categoryQuery, pageQuery] = useSuspenseQueries({
    queries: [
      trpc.images.categoryImageList.queryOptions(
        { category: categoryName, page, perPage },
        {
          refetchOnMount: false,
          refetchOnWindowFocus: false,
          refetchOnReconnect: false,
        }
      ),
      trpc.site.getCategoryPageMetaData.queryOptions(
        {
          category: categoryName,
        },
        {
          refetchOnMount: false,
          refetchOnWindowFocus: false,
          refetchOnReconnect: false,
        }
      ),
    ],
    combine: (results) => results,
  });
image.png
Was this page helpful?