T
TanStack4mo ago
unwilling-turquoise

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.
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,
},
};
},
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,
});
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,
});
No description
1 Reply
foreign-sapphire
foreign-sapphire3mo ago

Did you find this page helpful?