[urql@1.10.1] Just broken

Hi hi, it’s me again.

Maybe it’s just broken in next-urql.

Default Client: No client has been specified using urql's Provider.This means that urql will befalling back to defaults including making requests to `/graphql`.
If that's not what you want, please create a client and add a Provider.

Reproduction https://codesandbox.io/s/romantic-fast-8sise?file=/pages/index.js

[jshxr]

For anybody using a workspace/monorepo and still running into this issue:

Make sure that the createClient() method is imported from the same urql dependency as any useQuery or useMutation hook.

In my case, I was using a yarn workspace and its Plug’n’Play feature. urql was installed in two of the workspace packages. The setup looked something like this:

Package 1

package.json

{
    // ...
    "dependencies": {
        // ...
        "urql": "^2.1.3",
    }
}

index.ts

import { useQuery } from 'urql';
// ...
export const useSomeData = () => useQuery(SOME_DATA_QUERY);

Package 2

package.json

{
    // ...
    "dependencies": {
        // ...
        "urql": "^2.1.3",
        "next-urql": "^3.3.2",
        "package1": "workspace:*"
    }
}

pages/_app.tsx

import { withUrqlClient } from 'next-urql';
import { useSomeData } from 'package1/data';

const App= () => {
    const data = useSomeData();
    // ...
};

export default withUrqlClient(/*...*/)(App);

withUrqlClient(), under the hood, used the createClient() method of the urql dependency installed in package2. useSomeData(), on the other hand, used the useQuery() hook of the urql dependency installed in package1.

Therefore, the underlying Context.Provider and Context.Consumer didn’t belong to the same Context, resulting in the error message.

Fixed it by removing urql and next-urql from package2, installing next-urql in package1 and re-exporting withUrqlClient.

[nianiam]

@jshxr I know this is an old closed topic, but just in case you haven’t managed to figure out the mysteries of PnP here’s a little bit of help troubleshooting PnP problems.

There are a couple of yarn CLI tools we can use to investigate how our dependencies are defined:

• yarn why <package-name>
  • This will show you why a package has been installed. For example, which of your workspaces has it as a dependency.
  • Sometimes this is enough to figure out if there are multiple instances of a package by checking the hashes at the end of the output.
• yarn info <package-name>
  • This will show you package information including things like the package’s dependencies but importantly the number of instances in your code-base.
  • We can also investigate the peer dependencies of each instance using the --virtuals flag.
  • We can also use the -A/--all flag to check this from the top level of our monorepo.

-> yarn info urql -A --virtuals
├─ urql@npm:2.2.3
│  ├─ Instances: 2
│  ├─ Version: 2.2.3
│  │
│  └─ Dependencies
│     ├─ @urql/core@npm:^2.6.1 → npm:2.6.1
│     └─ wonka@npm:^4.0.14 → npm:4.0.15
│
├─ urql@npm:2.2.3 [5abd3]
│  ├─ Version: 2.2.3
│  │
│  └─ Peer dependencies
│     ├─ @types/graphql@* → ✘
│     ├─ @types/react@* → npm:17.0.4
│     ├─ graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 → ✘
│     └─ react@>= 16.8.0 → npm:17.0.2
│
└─ urql@npm:2.2.3 [5c718]
   ├─ Version: 2.2.3
   │
   └─ Peer dependencies
      ├─ @types/graphql@* → npm:14.5.0
      ├─ @types/react@* → npm:17.0.4
      ├─ graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 → npm:15.8.0
      └─ react@>= 16.8.0 → npm:17.0.2

Here we can see the urql package has @urql/core and wonka as dependencies, but also @types/graphql, @types/react, graphql and react as peer dependencies. In order for an instance to be the same, it’s peer dependencies must also be satisfied.

So, in this output, we need to add @types/graphql and graphql to the peer dependencies of whichever workspace corresponds to the hash [5abd3] (the crosses at the end of the line indicate this).

What should you have done in your example?

Instead of removing next-urql and urql from package2, we should instead add urql to the peer dependencies of package 1 and also ensure both packages have all of next-urql and urql’s peer dependencies satisfied by using yarn info urql -A --virtuals; preferably all with the same versioning.

What if I can’t control the dependencies?

If you’re not the package maintainer, you can enforce dependencies using the .yarnrc.yml file. Here’s yarn’s docs on that.

Yarn should really have a “how to troubleshoot” dependencies section because none of this is obvious…