Don't create a client by default in the context provider

[jackfranklin]

I just got caught out by realising I wasn't wrapping my component in a <Provider> that provides our own GraphQL client because the default context value is a urql client.

I get why this is a good default out the box for getting started, but I'd love to disable that so that we can ensure all our components are wrapped with a provider that exposes our custom client.

Is that possible to do, or to configure somehow ? If we can agree I'm happy to do the work to make the PR :)

[kitten]

I assume this means #225 is resolved?

I'll discuss this with @andyrichardson. I think we went with the defaults for shorter demos / getting started examples initially

[jackfranklin]

@kitten yes it does, just left a comment there 👍

[andyrichardson]

@jackfranklin is there a reason the default client is causing problems?

The default is only used when no value is passed to the Provider.

[kitten]

We could issue a one-time warning in development if the default provider is used? This way we can keep examples short but inform users that they're using the default client

[andyrichardson]

There isn't much value in having a default client. Let's type the client argument of the Provider as required.

I don't think many will encounter this issue (the docs clearly document the Provider usage) so adding in runtime checks is probably more effort than its worth.

[kitten]

@andyrichardson I think we were more talking about the client context itself 😅 not the Provider prop. We have a default client on our context which means our examples are valid and functional even when the provider isn't set.

That being said, also not that valuable apart from when someone just copies a snippet and expects it to work without any provider and client which it is unlikely to

Edit: that being said btw, we can flag this for removal but that's a breaking change so we should maybe queue it up for v2

[PascalPixel]

We're trying to use urql with Storybook and trying to keep the concepts for React/GQL as simple as possible for our backend devs, so not using a Provider wrapper component or Context would make things simpler...

Would it be possible not to use a high level Provider component or use context and just pass the client to useQuery and useMutation directly and import them somehow?

For example:

import { useQuery as useQueryX, useMutation as useMutationX, createClient } from 'urql'

const client = createClient({
  url: 'http://localhost:1234/graphql', // Your GraphQL endpoint here
});

export const useQuery = (query='') => {
  return useQueryX(query, client)
}

export const useMutation = (query='') => {
  return useMutationX(query, client)
}

[nephix]

So how can we turn the warning off? And why is there still a defaultClient without an option to disable it?

[sleekyom]

I have the same warning to when running my test