Comments (5)
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 💯
from graphql-react.
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.
from graphql-react.
Perfect, thanks!
from graphql-react.
@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?
from graphql-react.
@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.
from graphql-react.
Related Issues (20)
- hello can you convert for native js? HOT 6
- Document the `load` function HOT 3
- Support automatic persisted queries HOT 2
- How should you implement auth using this library? HOT 8
- Possibly missing files within package HOT 2
- Add ability to load on mount only if no cache HOT 2
- How to move gql query to useGraphQL operation query HOT 1
- Publish the GraphQL client in a separate package HOT 5
- Wrong type calculation on useGraphQL HOT 1
- How to use useGraphQL hooks when handleLoadMore functions trigger? HOT 1
- Allow React component displayName and propTypes to be removed in production builds HOT 3
- Pagination possible? HOT 4
- New composable React hooks HOT 2
- Add a license file HOT 3
- Add ability to clear not currently subscribed cache
- Switch to user defined cache keys
- Publish SSR functionality in a separate package
- error - unhandledRejection: TypeError: Head.rewind is not a function -> can't get the official example to work HOT 3
- How to use useLoading() to get the old loading from useGraphql()? HOT 4
- Clear code
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphql-react.