#Invariant failed: Expected to find a dehydrated data on window.$_TSR.router, but we did not.

11 messages · Page 1 of 1 (latest)

next hornet
#

Hey,

Im using tanstack start with tanstack query and running with bun.

This route is breaking SSR :

``export const Route = createFileRoute(
'/_studio/studio/$channelId/_content/content/videos',
)({
validateSearch: z.object({
page: z.number().default(0),
size: z.literal(10).or(z.literal(25)).or(z.literal(50)).default(10),
}),
search: {
middlewares: [
stripSearchParams({
page: 0,
size: 10,
}),
],
},
loaderDeps: ({ search }) => search,
loader: async ({ context, params, deps }) =>
await context.queryClient.ensureQueryData(
getStudioVideosQueryOptions(params.channelId, {
pageIndex: deps.page,
pageSize: deps.size,
}),
),
component: RouteComponent,
});

function RouteComponent() {
const { channel } = Route.useRouteContext();
const search = Route.useSearch();

const [pagination, setPagination] = useState({
pageIndex: search.page,
pageSize: search.size,
});
const { data, isLoading, isError } = useSuspenseQuery(
getStudioVideosQueryOptions(channel.id, pagination),
);
...
``

in the dev server I have this error : Serialization error: 1 | var L=... (very long cant show it in this message)

here is my router setup :
``
// Create a new router instance
export const getRouter = () => {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 60 * 5,
},
},
});

const router = createRouter({
routeTree,
context: {
queryClient,
user: undefined!,
},

defaultPreload: 'intent',

});

setupRouterSsrQueryIntegration({
router,
queryClient,
handleRedirects: true,
wrapQueryClient: true,
});

return router;
};
``
Anyone had this issue ? I don't manage to reproduce it in the tanstack start + react query template. I'm using the same packages versions as the template.

plucky cloud
#

what does the data for getStudiosVideosQueryOptions look like? is there anything that wouldn't be serializeable in it?

#

I'm not sure things like Blobs and Files are serializable for example

next hornet
#

``import { getApi } from '@/frontend/routes/api/$';
import { keepPreviousData, queryOptions } from '@tanstack/react-query';

export const getStudioVideosQueryOptions = (
channelId: string,
pagination: { pageIndex: number; pageSize: 10 | 25 | 50 },
) =>
queryOptions({
queryKey: [
'studio-videos',
channelId,
pagination.pageIndex,
pagination.pageSize,
],
placeholderData: keepPreviousData,
refetchOnWindowFocus: false,
queryFn: async () =>
await getApi()
.studio.channel({ channelId: channelId })
.videos.get({
query: { index: pagination.pageIndex, size: pagination.pageSize },
}),
});
``

``import { api } from '@/backend/api/api';
import { treaty } from '@elysiajs/eden';
import { createFileRoute } from '@tanstack/react-router';
import { createIsomorphicFn } from '@tanstack/react-start';

export const Route = createFileRoute('/api/$')({
server: {
handlers: {
GET: async ({ request }) => await api.fetch(request),
POST: async ({ request }) => await api.fetch(request),
PUT: async ({ request }) => await api.fetch(request),
DELETE: async ({ request }) => await api.fetch(request),
PATCH: async ({ request }) => await api.fetch(request),
OPTIONS: async ({ request }) => await api.fetch(request),
HEAD: async ({ request }) => await api.fetch(request),
ANY: async ({ request }) => await api.fetch(request),
},
},
});

export const getApi = createIsomorphicFn()
.server(() => treaty(api).api)
.client(() => treaty<typeof api>('http://localhost:3000').api);
``

im using elysia, this request isnt fetching files / blobs

plucky cloud
#

i feel like you don't need all of those if you've defined ANY

next hornet
#

yes true

#

so the issue is elysia response cant be serialized ?

plucky cloud
#

sounds like

next hornet
#

update this is it, the elysia error response / maybe every response isnt serializable

plucky cloud
#

oh yeah, if elysia uses a custom Error subclass or something, seroval won't know how to serialize it

next hornet
#

ty very much