Custom fetcher with generic url for fetching

[stefanfeldner]

https://www.the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-query#usage-example-isreacthook-false

Hello everyone,

is it possible to create a custom fetcher like the one in the link above but pass it a url somehow when querying or mutating to have a generic URL and fetch from multiple sources?GraphQL Code Generator. If so how would that look like in a generated query for example and how would I pass the URL there?

Thank you very much!

export const fetchData = <TData, TVariables>(
  query: string,
  variables?: TVariables,
  options?: RequestInit['headers'],
  passed_url?: string,
): (() => Promise<TData>) => {
  return async (passed_url) => {
    // use passed url or default to vendure url
    const default_url = process.env.DEFAULT_URL
    const choosenUrl = passed_url ?? default_url ?? ''

    // fetch from passed URL or use the default
    const res = await fetch(choosenUrl, {method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...options
      },
      body: JSON.stringify({
        query,
        variables
      })
    })
 
    const json = await res.json()
 
    if (json.errors) {
      const { message } = json.errors[0] || {}
      throw new Error(message || 'Error…')
    }
 
    return json.data
  }

And this is how a query would look like that I potentially want to pass the URL into:

const { data: customer, isLoading, refetch, fetchStatus } = useActiveCustomerQuery({ }, { staleTime: 30 * 24 * 60 * 60 * 1000 /* Invalid after 30 days */ })

Also currently when trying this without a passed URL it doesn't work, it creates a weird http://localhost:3000/[object%20Object] URL for some reason. Does anyone have an idea why?

Thanks! :)