Publish the GraphQL client in a separate package
See original GitHub issueHello Jayden
Thank you for this great module. I just switch from Apollo-client to graphQL-react and it feels much better!
I am using graphQl-react in a non-react app. Currently, I have to install react and react-dom to use it.
Would you consider extracting the GraphQL
class in a separate npm module with no dependencies on react?
Thank you
Also, here is an example code of the GraphQL client running in node. This could be helpful to have this example in the docs, at least for me 😃.
const fetch = require('node-fetch')
const { GraphQL } = require('graphql-react')
const graphql = new GraphQL()
if (!globalThis.fetch) {
globalThis.fetch = fetch
}
const apiFetch = query => async variables => {
try {
const res = await graphql.operate({
operation: { query, variables },
fetchOptionsOverride: options => {
options.url = 'https://graphql-pokemon.now.sh'
}
})
const value = await res.cacheValuePromise
if (value.graphQLErrors) throw value.graphQLErrors[0]
if (value.fetchError) throw value.fetchError
if (value.httpError) throw value.httpError
if (value.parseError) throw value.parseError
return value.data
} catch (e) {
const errorMessage = `Erreur API : ${e.message}`
console.error(e)
throw errorMessage
}
}
const pokemon = apiFetch(
'query Pokemon($name: String!) { pokemon(name: $name) { image } }'
)
const run = async () => {
const res = await pokemon({ name: 'pikachu' })
console.log(res)
}
run()
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Subscriptions in Apollo Server - Apollo GraphQL Docs
When working with GraphQL subscriptions, you publish an event whenever a subscription's return value should be updated. One common cause of such an...
Read more >GraphQL Code Libraries, Tools and Services
A simple and flexible JavaScript GraphQL client that works in all JavaScript environments (the browser, Node.js, and React Native) - basically a lightweight ......
Read more >Apollo Multiple Clients with React? | by Rafael Nunes - Medium
This quick post explains how to use different Apollo clients in the same React ... clients to query different GraphQL APIs from my...
Read more >hasura/go-graphql-client - GitHub
Some GraphQL servers may require authentication. The graphql package does not directly handle authentication. Instead, when creating a new client, ...
Read more >Subscriptions and Live Queries - Real Time with GraphQL
Once the AsyncIterator publishes a value (the payload or event), ... we use the client exported from the graphql-ws package instead.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@francoisromain while you may still run into problems with the
react
andreact-dom
peer dependencies, there are standalone functions for making GraphQLfetch
requests in the new API:fetchGraphQL
fetchOptionsGraphQL
They will just get you a result in a nice cacheable format.
You could also directly use the cache related stuff:
Cache
cacheDelete
cacheEntryDelete
cacheEntryPrune
cacheEntrySet
cacheEntryStale
cachePrune
cacheStale
If you are really fancy, you could also directly use the loading system:
Loading
LoadingCacheValue
Basically everything except the React hooks and context could be used in a non React project.
Thank you for your answer.
That’s a very good news that you plan to publish the graphql client as a separate library.
Regarding the usage in node, I am in line with your point. In my specific case I use the graphql-client in a vuejs app (here: https://github.com/MTES-MCT/camino-ui/blob/master/src/api/_client.js). The example in nodejs is just a generic way to show how to use it. There is probably a better way to do it.