Typesafe wrapper around load functions

[nick-lehmann]

I have some common logic that should run at the beginning of every load function (in my case, only on the server). The concrete example is authorization and I want to enforce permission checking on any route. The final solution should look something like that:

import type { PageServerLoad } from './$types.js'

export const load: PageServerLoad = serverRoute(permission, async (event) => {
    [...]
})

The following code snippet shows my current implementation of serverRoute.

export function serverRoute<Load extends Kit.ServerLoad>(permission: Permission, handler: Load): Load {
	return async (event) => {
		checkAccess(event.locals, permission)
		return handler(event)
	}
}

However, typescript complains with:

Type '(event: ServerLoadEvent<Partial<Record<string, string>>, Record<string, any>, string | null>) => Promise<void | Record<string, any>>' is not assignable to type 'Load'.
  '(event: ServerLoadEvent<Partial<Record<string, string>>, Record<string, any>, string | null>) => Promise<void | Record<string, any>>' is assignable to the constraint of type 'Load', but 'Load' could be instantiated with a different subtype of constraint 'ServerLoad<Partial<Record<string, string>>, Record<string, any>, void | Record<string, any>, string | null>'.ts(2322)

In theory, I understand the error message. Unfortunately, I fail to understand why it happens in my concrete case. The code only asks for an "original" handler, performs some actions beforehand, calls the handler and returns its result unchanged.

Would anyone mind sharing some ideas on the mitigate this error? My only requirement would be that the type interference still works and the data prop of the component knows what data is returned.

[cdcarson]

I've struggled with this too, though in my case I wrap action functions (for reasons that we need not go into.) I think the issue is that some of the generated types (RequestEvent, PageServerLoad, etc.) are perhaps over-typed and/or include unhelpful default types. I've considered filing an issue, but I'm not really sure that there's a better solution.

Whatever the case, it requires your wrapper function to be similarly typed. So, you can get around the typescript errors but at the expense of a bit of ugliness and verbosity. For your example above, here's what seems to work (i.e. typescript doesn't complain, and SvelteKit infers the correct shape of PageData back into ./$types.) Do this for the wrapper...

export function serverRoute<
  WhatYourFuncReturns extends Record<string, unknown>,
  RouteParams extends Partial<Record<string, string>> = Partial<Record<string, string>>,
  ParentData extends Record<string, unknown> = Record<string, unknown>,
  RouteId extends string | null = string | null
>(
  permission: any,
  handler: (
    event: ServerLoadEvent<RouteParams, ParentData, RouteId>
  ) => Promise<WhatYourFuncReturns>
): ServerLoad<RouteParams, ParentData, WhatYourFuncReturns, RouteId> {
  const wrapper = async (
    event: ServerLoadEvent<RouteParams, ParentData, RouteId>
  ) => {
    checkAccess(event.locals, permission)
    return await handler(event);
  };
  return wrapper;
}

...and be similarly verbose in +page.server.ts...

import { serverRoute } from '$lib/utils/server-route.server.js';
import type {
  RouteParams,
  RouteId,
  PageServerLoadEvent,
  PageServerParentData
} from './$types.js';

export const load = serverRoute<
  { foo: number },
  RouteParams,
  PageServerParentData,
  RouteId
>(
  'fooPermission',
  async (
    event: PageServerLoadEvent
  ) => {
    console.log(event.cookies.get('wow'))
    return Promise.resolve({foo: 9});
  }
);

Let me know if that helps.

[cdcarson]

Are you sure you can omit the types when you call serverRoute and still have the inferred PageData type?

In my example I assumed this was being picked up from explicitly typing WhatYourFuncReturns as {foo: number}. But if not it would definitely make things nicer.

Let me know what you figure out.

[nick-lehmann]

Yes, I am sure. I was also surprised since I also tried something similar to your solution already. But I'm also super happy that it works 👍🏻

To be precise, it works for typescript 4.9.5 and svelte kit 1.7.2

[KiraPC]

Hello, sorry for returning on this old topic, anyone found a way to infer also the RoutId, PageServerParentData etc?

With this solution it only infers the output data (PageData)

[cdcarson]

For routeId, see #11746

[KiraPC]

Thanks for reply, but I'm looking for something automatic.