question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Publish the GraphQL client in a separate package

See original GitHub issue

Hello 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:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
jaydensericcommented, May 5, 2021

@francoisromain while you may still run into problems with the react and react-dom peer dependencies, there are standalone functions for making GraphQL fetch requests in the new API:

They will just get you a result in a nice cacheable format.

You could also directly use the cache related stuff:

If you are really fancy, you could also directly use the loading system:

Basically everything except the React hooks and context could be used in a non React project.

1reaction
francoisromaincommented, Jul 27, 2020

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found