Urql: next-urql: Switch from NextPageContext to PartialNextContext breaks usage with NextPage type

[impulse]

Nextjs NextPage uses NextPageContext to type the context. With the recent update in urql to PartialNextContext, this breaks passing in a component typed with NextPage into withUrqlClient.

urql version & exchanges:

"@urql/devtools": "^2.0.2",
"@urql/exchange-graphcache": "^3.3.2",
"next": "10.0.3",
"next-urql": "^2.1.1",
"urql": "^1.11.4",

Steps to reproduce

Use the official Nextjs example https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#typescript and pass it in withUrqlClient.

import { NextPage } from "next";
import { withUrqlClient } from "next-urql";
import { createUrqlClient } from "../lib/createUrqlClient";

interface Props {
  userAgent?: string;
}

const Page: NextPage<Props> = ({ userAgent }) => (
  <main>Your user agent: {userAgent}</main>
);

Page.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers["user-agent"] : navigator.userAgent;
  return { userAgent };
};

export default withUrqlClient(createUrqlClient)(Page);

Expected behavior
No type errors

Actual behavior

Argument of type 'FunctionComponent<Props> & { getInitialProps?(context: NextPageContext): Props | Promise<Props>; }' is not assignable to parameter of type 'NextComponentType<PartialNextContext, {}, {}>'.
  Type 'FunctionComponent<Props> & { getInitialProps?(context: NextPageContext): Props | Promise<Props>; }' is not assignable to type 'FunctionComponent<WithUrqlProps> & { getInitialProps?(context: PartialNextContext): {} | Promise<{}>; }'.
    Type 'FunctionComponent<Props> & { getInitialProps?(context: NextPageContext): Props | Promise<Props>; }' is not assignable to type '{ getInitialProps?(context: PartialNextContext): {} | Promise<{}>; }'.
      Types of property 'getInitialProps' are incompatible.
        Type '((context: NextPageContext) => Props | Promise<Props>) | undefined' is not assignable to type '((context: PartialNextContext) => {} | Promise<{}>) | undefined'.
          Type '(context: NextPageContext) => Props | Promise<Props>' is not assignable to type '(context: PartialNextContext) => {} | Promise<{}>'.
            Types of parameters 'context' and 'context' are incompatible.
              Type 'PartialNextContext' is missing the following properties from type 'NextPageContext': pathname, query

[acedeywin]

I am currently having this same issue.

[Sulman633]

The same issue as well, please merge as soon as possible

[kitten]

We're on track to get this merged and released this week, but we'd like to ensure that the fixed types work as intended without pulling in Next as a dependency on our end, as it's been before, hence we're spending more time on testing these types 🙇

As it stands though, it's alright, please work around this by casting the type forcefully until this is available; and maybe give the packages as provided by CodeSandbox CI a try on the PR above.
Comments & pings don't speed up our process as we're actively working on this, but testing these prebuilds out does help us a lot! 🙌

Edit: I believe CodeSandbox CI doesn't explain the process, so if you go to the PR, check Codesandbox CI in the "checks" and copy the link under "Packages" for next-urql then you can use this link to the Radballes as the version entry for "next-urql" in your package.json. Cheers! ❤️

[impulse]

@kitten I'd be up for testing it out, but I didn't understand your instructions. Where do I go from here?

[JoviDeCroock]

@impulse this is the provided package: https://pkg.csb.dev/FormidableLabs/urql/commit/3ec75e59/next-urql you can paste this as the version for next-urql.

Alternatively would you mind trying: withUrqlClient(options)<NextPage>

[impulse]

@JoviDeCroock this is what I get when installing the package from above URL:

Argument of type 'NextComponentType<NextPageContext, Props, Props>' is not assignable to parameter of type 'NextComponentType<PartialNextContext, {}, {}>'.
  Type 'ComponentClass<Props, any> & { getInitialProps?(context: NextPageContext): Props | Promise<Props>; }' is not assignable to type 'NextComponentType<PartialNextContext, {}, {}>'.
    Type 'ComponentClass<Props, any> & { getInitialProps?(context: NextPageContext): Props | Promise<Props>; }' is not assignable to type 'ComponentClass<WithUrqlProps, any> & { getInitialProps?(context: PartialNextContext): {} | Promise<{}>; }'.
      Type 'ComponentClass<Props, any> & { getInitialProps?(context: NextPageContext): Props | Promise<Props>; }' is not assignable to type '{ getInitialProps?(context: PartialNextContext): {} | Promise<{}>; }'.
        Types of property 'getInitialProps' are incompatible.
          Type '((context: NextPageContext) => Props | Promise<Props>) | undefined' is not assignable to type '((context: PartialNextContext) => {} | Promise<{}>) | undefined'.
            Type '(context: NextPageContext) => Props | Promise<Props>' is not assignable to type '(context: PartialNextContext) => {} | Promise<{}>'.
              Types of parameters 'context' and 'context' are incompatible.
                Type 'PartialNextContext' is not assignable to type 'NextPageContext'.
                  Types of property 'pathname' are incompatible.
                    Type 'string | undefined' is not assignable to type 'string'.
                      Type 'undefined' is not assignable to type 'string'.ts(2345)