I get the following error with red-squiggly lines on the async
word:
Argument of type '({ req, res }: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>) => Promise<{ props: { admin: Admin; licenses?: undefined; }; } | { ...; }>' is not assignable to parameter of type '(context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>) => GetServerSidePropsResult<{ admin: Admin; licenses?: undefined; }> | Promise<...>'.
Type 'Promise<{ props: { admin: Admin; licenses?: undefined; }; } | { props: { admin: Admin; licenses: License[]; }; }>' is not assignable to type 'GetServerSidePropsResult<{ admin: Admin; licenses?: undefined; }> | Promise<GetServerSidePropsResult<{ admin: Admin; licenses?: undefined; }>>'.
Type 'Promise<{ props: { admin: Admin; licenses?: undefined; }; } | { props: { admin: Admin; licenses: License[]; }; }>' is not assignable to type 'Promise<GetServerSidePropsResult<{ admin: Admin; licenses?: undefined; }>>'.
Type '{ props: { admin: Admin; licenses?: undefined; }; } | { props: { admin: Admin; licenses: License[]; }; }' is not assignable to type 'GetServerSidePropsResult<{ admin: Admin; licenses?: undefined; }>'.
Type '{ props: { admin: Admin; licenses: License[]; }; }' is not assignable to type 'GetServerSidePropsResult<{ admin: Admin; licenses?: undefined; }>'.
Type '{ props: { admin: Admin; licenses: License[]; }; }' is not assignable to type '{ props: { admin: Admin; licenses?: undefined; } | Promise<{ admin: Admin; licenses?: undefined; }>; }'.
Types of property 'props' are incompatible.
Type '{ admin: Admin; licenses: License[]; }' is not assignable to type '{ admin: Admin; licenses?: undefined; } | Promise<{ admin: Admin; licenses?: undefined; }>'.
Type '{ admin: Admin; licenses: License[]; }' is not assignable to type '{ admin: Admin; licenses?: undefined; }'.
Types of property 'licenses' are incompatible.
Type 'License[]' is not assignable to type 'undefined'.ts(2345)
My license.tsx
file looks like:
pages/license.tsx
export const getServerSideProps = withSessionSsr(async function ({ req, res }) {
const admin = req.session.admin
const licenses = await prisma.license.findMany()
if (admin === undefined) {
res.setHeader('location', '/admin')
res.statusCode = 302
res.end()
return {
props: {
admin: { isLoggedIn: false } as Admin,
},
}
}
return {
props: { admin, licenses },
}
})
My withSession.ts
file looks like:
utils/withSession.ts
import { GetServerSidePropsContext, GetServerSidePropsResult, NextApiHandler } from 'next'
import { withIronSessionApiRoute, withIronSessionSsr } from 'iron-session/next'
import { IRON_OPTIONS } from '@/utils/index'
function withSessionRoute(handler: NextApiHandler) {
return withIronSessionApiRoute(handler, IRON_OPTIONS)
}
// Theses types are compatible with InferGetStaticPropsType https://nextjs.org/docs/basic-features/data-fetching#typescript-use-getstaticprops
function withSessionSsr<P extends { [key: string]: unknown } = { [key: string]: unknown }>(
handler: (
context: GetServerSidePropsContext
) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>
) {
return withIronSessionSsr(handler, IRON_OPTIONS)
}
export { withSessionRoute, withSessionSsr }
How do I solve this? My goal is to want the props
to not only return { admin }
but also any other objects, in this case, license
without fiddling with the utils
file since it’s a session wrapper to check if some page is private or not.