Publish the GraphQL client in a separate package

[francoisromain]

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()

[jaydenseric]

Thanks for the kind words :)

Would you consider extracting the GraphQL class in a separate npm module with no dependencies on react?

Yes! That has been the plan for some time now; hopefully I'll be able to get around to it sometime soon. I also plan to add code examples for the GraphQL instance method operate.

Regarding usage in Node.js… While the GraphQL client has been designed from the start to work both in a server and browser environment, there really is not a huge benefit to using it in Node.js if it's not part of a SSR setup with cache hydration on the client, etc. While GraphQL is super lightweight, it is still doing work like checking for file uploads and populating cache that might be unnecessary for a server only script. Personally I just make GraphQL fetch requests from scratch for server only scripts.

[francoisromain]

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.

[jaydenseric]

Closing because in the new API that's coming, there is no longer a GraphQL client! React context will provide cache and loading stores, and management of them will be handled using very focused React hooks. This way only absolutely necessary code will be bundled for any given route.

Potentially there will be a utility function for making GraphQL fetch requests (it always resolves a cacheable value, even in case of client or server errors) that could be published, but we can consider doing that once the final API is ready.

[francoisromain]

Hello @jaydenseric Is it possible to use the v13 in a non-react app?

With v12, we were using graphql.operate (like in the first post of this thread). Is there a way to migrate to v13?

Thank you

[jaydenseric]

@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:

• function fetchGraphQL
• function fetchOptionsGraphQL

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

You could also directly use the cache related stuff:

• class Cache
• function cacheDelete
• function cacheEntryDelete
• function cacheEntryPrune
• function cacheEntrySet
• function cacheEntryStale
• function cachePrune
• function cacheStale

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

• class Loading
• class LoadingCacheValue

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