Default fetch URL

[ghost]

I didn't see this in the docs. Does the fetch URL have to be set as an override for every single query, or is there an option to set a default one when instantiating the client?

[jaydenseric]

It needs to be set for every query component; with this design multiple GraphQL APIs can be queried and components have final say about fetch options.

What you can do is make a component for each API you want to query like this:

import { Query } from 'graphql-react'

const pokemonFetchOptionsOverride = options => {
  options.url = 'https://graphql-pokemon.now.sh'
}

const PokemonQuery = props => (
  <Query
    fetchOptionsOverride={pokemonFetchOptionsOverride}
    {...props}
  />
)

Then you can just use <PokemonQuery> everywhere and have DRY config.

[ghost]

Perfect, thanks!

[jthegedus]

@jaydenseric This took a while to find. I thought I was reading the docs incorrectly for setting a default url for my GraphQL instance. Might I suggest adding a section on this near the top of the docs?

[jaydenseric]

@jthegedus I think it's only confusing for people who are used to how Apollo Client sets the GraphQL endpoint uri on the client instance, and assume that's how other clients work too.

People who read the graphql-react setup instructions will see this sentence:

Setup is simple because Query components determine their own fetch options (such as the GraphQL endpoint URI).

The usage example also shows how the GraphQL endpoint URL is specified for queries:

I did notice that it is not documented for the FetchOptions type that the default URL is /graphql, and right now looked at adding it. But then I realised that there is no obvious place to put that in the JSDoc types, since adding a default value would imply that it is an optional property, which it is not. If your FetchOptionsOverride function removes the url, fetching the query will fail.

[jthegedus]

The thing that sent me down the wrong path was the fact it is named as an "Override", implying a default. And when I couldn't find a default I thought that maybe it was me who had not set the default. I think the language could be made clearer here.

And while the sentence

Setup is simple because Query components determine their own fetch options (such as the GraphQL endpoint URI).

is correct, it wasn't helpful in correcting my understanding of how to reuse a URI.

Since reusing a URI is such a common use case for any GraphQL client, I would expect a simple example as you gave above to feature somewhere early within the documentation, say in the Usage section under the existing Pokemon example.

eg:

In the case of reusing a single URI throughout your application, abstracting your API into it's own API Query component is as simple as:

import React from 'react'
import { Query } from 'graphql-react'

const pokemonFetchOptionsOverride = options => {
  options.url = 'https://graphql-pokemon.now.sh'
}

const PokemonQuery = props => (
  <Query
    fetchOptionsOverride={pokemonFetchOptionsOverride}
    {...props}
  />
)

export default PokemonQuery

Alternatively, an FAQ would also work.

Just my 2c, thanks for the awesome tool 💯