Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GetServerSidePropsWrapper type issues with Props and Query #675

Closed
zackdotcomputer opened this issue May 24, 2022 · 2 comments · Fixed by #731
Closed

GetServerSidePropsWrapper type issues with Props and Query #675

zackdotcomputer opened this issue May 24, 2022 · 2 comments · Fixed by #731
Labels
needs investigation This needs to be investigated further before proceeding

Comments

@zackdotcomputer
Copy link

Describe the problem

Wrapping a getServerSideProps function with getServerSidePropsWrapper causes erasure of the P and Q types, which means the result cannot be type-checked to match against the page component's expected Props or the paths expected Query.

Additionally, if the Q type is defined, then the function cannot be handed to the wrapper as it complains about a potential disagreement between Q and ParsedUrlQuery.

What was the expected behavior?

getServerSidePropsWrapper should accept any P and Q types and should return precisely the same type as the handler it wraps.

Reproduction

The issue is reproducible with just a few lines of TS code:

import { getServerSidePropsWrapper } from "@auth0/nextjs-auth0";
import { GetServerSideProps, GetServerSidePropsContext, Redirect } from "next";

const getPropsExample: GetServerSideProps<{ roles: string[] }, { userId: string }> = async () => {
  return { redirect: { destination: "/", permanent: false } };
};
const wrappedExample: typeof getPropsExample = getServerSidePropsWrapper(getPropsExample);

This produces two compiler errors on the final line:
On the assignment because of the Props erasure:

Type 'GetServerSideProps<{ [key: string]: any; }, ParsedUrlQuery, PreviewData>' is not assignable to type 'GetServerSideProps<{ roles: string[]; }, { userId: string; }, PreviewData>'.
  Property 'roles' is missing in type '{ [key: string]: any; }' but required in type '{ roles: string[]; }'.ts(2322)

On the wrap because of the Query erasure:

Argument of type 'GetServerSideProps<{ roles: string[]; }, { userId: string; }, PreviewData>' is not assignable to parameter of type 'GetServerSideProps<{ [key: string]: any; }, ParsedUrlQuery, PreviewData>'.
  Property 'userId' is missing in type 'Dict<string | string[]>' but required in type '{ userId: string; }'.ts(2345)

Environment

  • @auth0/nextjs-auth0 version 1.9.0
  • next version 12.1.6
  • Typscript version 4.6.2
@zackdotcomputer
Copy link
Author

zackdotcomputer commented May 24, 2022

This should only be an issue if you're refactoring out parts of getServerSideProps somewhere for reuse. I've worked around it temporarily with:

return getServerSidePropsWrapper(wrapper as any) as any as typeof wrapper;

But I think the ultimate solution is to make GetServerSidePropsWrapper aware of types P, Q, PreviewData from the next definition of GetServerSideProps

(See #664 for relevant touchpoints)

@adamjmcgrath
Copy link
Contributor

Thanks for raising this @zackdotcomputer - we'll add something to our backlog

@adamjmcgrath adamjmcgrath added the needs investigation This needs to be investigated further before proceeding label May 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs investigation This needs to be investigated further before proceeding
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants