useMutation with different URL

[conormcafee]

Having issues trying to pass a different endpoint to a useMutation.

We have created a client which has our base URL - this is used for 99% of our queries and mutations on the platform:

const ClientProvider = ({ children }) => {
  const { keycloak } = React.useContext(AuthContext)

  const client = createClient({
    url: process.env.REACT_APP_API_URL,
    exchanges: [
      dedupExchange,
      cacheExchange,
      getAuthExchange(keycloak),
      fetchExchange,
    ],
  })

  return <Provider value={client}>{children}</Provider>
}

I have the scenario now, that I have to send some mutations to a different URL:

const NEW_URL = `${process.env.REACT_APP_API_URL}/new-path-here`

Going by the documentation, https://formidable.com/open-source/urql/docs/api/urql/#usemutation - it states that I can pass a OperationContext to this which would allow me to pass a URL. I have not been able to get this working, not sure if its an issue or my implementation.

const EXECUTOR = `${process.env.REACT_APP_API_URL}/executor`
const createMutation = useMutation(card.datasource)[1]
const additional = {
    context: {
      url: EXECUTOR,
    },
 }
const onClick = () => createMutation(additional).then(result => console.log(result))

return(
 <button onClick={() => onClick()}>Trigger Mutation</button>
)

Everytime I click the above button, it still uses the base path ignores the "additional" values I pass to the createMutation

urql v1.11.4

[kitten]

The executeMutation function accepts variables and optionally Partial and may be used to start executing a mutation. It returns a Promise resolving to an OperationResult.

This is referring to arguments, so the first argument, as per this are variables the second is a partial context, so by that you'll have to pass executeMutation(vars, { context: url })

That being said, I'm generally curious why you're altering the mutation's URL per mutation here. But either way, the above will work just fine 👍

[conormcafee]

Ah of course, apologies! Case of looking at it too long and tripping myself up. That works - thank you for the speedy response!

The piece of software we're working on, is data driven in that the backend is returning us a list of cards - each card has a datasource and other additional attributes - the datasource is either a GraphQL query or mutation. That is then passed to the useQuery or useMutation hooks. Majority of them are from our "main" backend as such - but there are some which need to call another external service which require we call to a different endpoint. The scenario I was building out this morning was talking to the external source hence why I had to change the URL each time