T
TanStack•5w ago
metropolitan-bronze

Getting TS error `xyz is not assignable to type '"Function is not serializable"'` from `beforeLoad`

I've been trying to implement the code pattern shown here like this: 
export const getAllTodos = createServerFn().handler(async () => ['ToDo 1', 'ToDo 2', 'ToDo 3'];

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ queryOptions: { queryKey: ['todos'], queryFn: getAllTodos } }),
  loader: async ({ context: ctx }) => {
    await ctx.queryClient.prefetchQuery(ctx.queryOptions);
  },
  component: App,
});
export const getAllTodos = createServerFn().handler(async () => ['ToDo 1', 'ToDo 2', 'ToDo 3'];

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ queryOptions: { queryKey: ['todos'], queryFn: getAllTodos } }),
  loader: async ({ context: ctx }) => {
    await ctx.queryClient.prefetchQuery(ctx.queryOptions);
  },
  component: App,
});
This gives me an error on beforeLoad: 
Type '() => { queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' is not assignable to type '(ctx: BeforeLoadContextOptions<Register, RootRoute<Register, undefined, MyRouterContext, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 5 more ..., undefined>) => { ...; }'.
  Call signature return types '{ queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' and '{ queryOptions: { queryKey: string[]; queryFn: "Function is not serializable"; }; }' are incompatible.
    The types of 'queryOptions.queryFn' are incompatible between these types.
      Type 'OptionalFetcher<Register, undefined, undefined, string[]>' is not assignable to type '"Function is not serializable"'.ts(2322)
Type '() => { queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' is not assignable to type '(ctx: BeforeLoadContextOptions<Register, RootRoute<Register, undefined, MyRouterContext, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 5 more ..., undefined>) => { ...; }'.
  Call signature return types '{ queryOptions: { queryKey: string[]; queryFn: OptionalFetcher<Register, undefined, undefined, string[]>; }; }' and '{ queryOptions: { queryKey: string[]; queryFn: "Function is not serializable"; }; }' are incompatible.
    The types of 'queryOptions.queryFn' are incompatible between these types.
      Type 'OptionalFetcher<Register, undefined, undefined, string[]>' is not assignable to type '"Function is not serializable"'.ts(2322)
I started the app inside a monorepo using npm create @tanstack/start@latest and adjusted some stuff like TS config etc. When having the same code in a standalone repo right after npm create @tanstack/start@latest, I'm not getting this errors. Also, when just ignoring with @ts-ignore, everything is working as expected at runtime, so this only seems to be build time issue. I already tried c/p the whole tsconfig.json from the standalone app to the monorepo app but am still seeing the error 🤨. I'd really appreciate some input on where I could look into!
4 Replies
metropolitan-bronze
metropolitan-bronzeOP•5w ago
Ps.: I read this question and the suggestion there is to use ssr: false, which also resolves the error for me. However, this leaves the question whether or not this is only meant to work with ssr: false or not? If it is really supposed to only work with ssr: false: - Why is this not mentioned in the docs? - Why is this not showing the TS error in the fresh standalone app created from npm create @tanstack/start@latest even though not using ssr: false there either? - Why is this still working as expected at runtime? Update When using a "real" query fn, which actually touches the server env like reading from the DB instead of just having this test fn shown above, I'm actually getting runtime errors as well, when not using ssr: false but only ignoring the errors:
Error reading routerStream: g [Error]: The value [object Function] of type "function" cannot be parsed/serialized.
So I guess it is true that non serializable objects can only be put into router context with ssr: false. Still a little confused that I'm not seeing the TS errors in my standalone app but this is just a minor detail to me...
harsh-harlequin
harsh-harlequin•4w ago
when using SSR, beforeLoad's return value will be serialized and then be sent to the client hence you can only return serializable stuff here when you disable SSR, the serializabilty check is disabled as well as you will only pass the data around locally on the client
metropolitan-bronze
metropolitan-bronzeOP•4w ago
Thanks for the clarification 👍! Might make sense to mention this in the query docs somewhere next to the example even though this detail is only relevant for start apps but people (like myself 😉) might be coming from google w/o realizing the difference etc.
harsh-harlequin
harsh-harlequin•3w ago
we should at least mention it in the start docs, which we also not do yet 😄

Did you find this page helpful?