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

argument of withApollo doesn't accept functional App with getInitialProps #113

Open
shrugs opened this issue Mar 4, 2020 · 3 comments
Open

Comments

@shrugs
Copy link

shrugs commented Mar 4, 2020

function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width" />
      </Head>
      <Providers>
        <Component {...pageProps} />
      </Providers>
    </>
  );
}

// next-with-apollo will run this and we want our pages' getInitialProps to run as well
App.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }
  return { pageProps };
};

export default withApollo(App);
//          ts error here ^
Argument of type 'typeof App' is not assignable to parameter of type 'typeof App | (ComponentClass<any, any> & { getInitialProps?(context: NextPageContext): any; }) | (FunctionComponent<any> & { ...; })'.
  Type 'typeof App' is not assignable to type 'FunctionComponent<any> & { getInitialProps?(context: NextPageContext): any; }'.
    Type 'typeof App' is not assignable to type '{ getInitialProps?(context: NextPageContext): any; }'.
      Types of property 'getInitialProps' are incompatible.
        Type '({ Component, ctx }: { Component: any; ctx: any; }) => Promise<{ pageProps: {}; }>' is not assignable to type '(context: NextPageContext) => any'.
          Types of parameters '__0' and 'context' are incompatible.
            Type 'NextPageContext' is missing the following properties from type '{ Component: any; ctx: any; }': Component, ctxts(2345)

i.e. the accepted input on L26 is one of Page or App (the nextjs component, not a functional component that performs the same operations)

since the nextjs recommended custom app is now the functional component version, it'd be good to allow that: https://nextjs.org/docs/advanced-features/custom-app

as a workaround, erasing the type with App as any means we pass the type check and the code stills functions as expected.

@lfades
Copy link
Owner

lfades commented Mar 12, 2020

Thank you for the report, if you want to fix it a PR is welcome 🙏

@utiq
Copy link

utiq commented Apr 15, 2021

@shrugs I'm facing the same issue, how did you fix it?

@shrugs
Copy link
Author

shrugs commented Apr 17, 2021

@utiq cast it to any like withApollo(App as any)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants