Changing a client's URL

[codazzo]

Hello! 👋
I'm using urql in a React Native project. I have some code very similar to the following snippet (from the docs)

import { createClient, Provider } from 'urql';
const client = createClient({
  url: 'http://localhost:3000/graphql',
});
const App = () => (
  <Provider value={client}>
    <YourRoutes />
  </Provider>
);

In the app I'm using I have a "toggle" for certain users to choose between a "Staging" and a "Production" API, the effect of which should be to change the url used by the client.

Looking at the code, I see that url is an instance property of Client and requests copy it from the instance when they're created. This means I could import Consumer from urql to get the client then change client.url as needed. As this is not documented though, I wonder if this is something I should be doing?

The alternative I see would be to use some kind of state and build a new client when I need to change the url

import { createClient, Provider } from 'urql';

const buildClient = (url) =>
    createClient({
        url,
    });

const App = () => {
  const [client, setClient] = useState(buildClient(Config.graphQLURL)); // pass setClient down to components, possibly via its own context?

  <Provider value={client}>
    <YourRoutes />
  </Provider>
}

What would you recommend? I'd be inclined to just set .url but only if that's something that I'm meant to be doing / won't change over time.

Thanks in advance 🙏

[JoviDeCroock]

Hey

I once made an exchange with this purpose, multi-endpoints exchange which allows you to choose url's given certain conditions 003c0a1.

For the case of recreating the client, I'd advise on that for your particular customer, this mainly because it also resets the state, ... Mutating the url would be a last resort imo. You can also make a custom wrapper for your hook-calls and pass in the url through the context parameter.

In short, your approach seems fine to me personally and can be expanded on for cache-clearing, ...

[codazzo]

Valid point about the state, I think I'll settle on that. Thanks for the pointers!

[chriszrc]

@JoviDeCroock I'm using a mapExchange with an onOperation config that returns a makeOperation where the url in context is overridden, but it has no effect on the url used to make the graphql request :'(

return makeOperation(operation.kind, operation, {
          ...operation.context,
          test: true,
          url: 'test', //doesn't change anything
        });

[JoviDeCroock]

I mean, you are giving me very little info to work with so just the defaults.

Does this happen before the fetchExchange and any other exchanges that might change it?

[chriszrc]

I just starting using urql, you are absolutely right, I just had to place the mapExchange before the fetchExchange! Thank you! I thought maybe it should go afterwards, because it would be listening for the onOperation-