How to use graphql-js to call APIs from the client code?

Question

I am developing an internal TypeScript library which needs to call a couple of GraphQL endpoints. The library is supposed be imported in front end projects, but it is not dependent on any specific framework (like angular or react).

I would like to be able to use a GraphQL library for GraphQL calls. I checked Apollo, but it brings react with it (which I don't need). In the graphql-js documentation, it states that it can be used in browser, at the same time they only provide code samples for server-side code.

So far, I am just making plain rest class, but I am interested in generating at least types automatically as it is inconvenient.

Q: How to use graphql-js in the client code? Or is there any other way to call graphql endpoints without having to import Apollo with react?

Any suggestion is appreciated.

Herku · Accepted Answer · 2022-12-04 10:59:16Z

GraphQL requests can be made over HTTP. Most servers follow the "GraphQL over HTTP" specification. How a request can be done using the POST HTTP method can be found in the documentation and quite a lengthy tutorial here. Here is a simple fetch example:

await fetch('http://your.server.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: "...",
    variables: { "a": "..." },
  }),
});

For a much better experience and less boilerplate you could use graphql-request.

import { request, gql } from 'graphql-request'

const query = gql`
  {
    ...
  }
`

await request('https://api.spacex.land/graphql/', query)

I also like to pair the library with GraphQL Code Generator. You can either create a fully typed SDK or use the simpler typed document node to get typesafe query variables and results.

For inspiration on the setup, you could use my repository. It is a bit old and needs some package upgrades, but I think the principles should be the same.

Michel Floyd · Accepted Answer · 2022-11-28 21:13:55Z

1

The Apollo client does not require react. The Apollo client documentation is very react-centric (for Javascript at least) but the client exposes an API which can be used without React. Even when building in react it can be useful to use, for example, client.query() to perform a query outside a component context.

See also https://www.brianperry.dev/til/2021/using-apollo-without-react/ for how to import Apollo Client without react:

import { ApolloClient, gql, InMemoryCache } from "@apollo/client/core";

edited Nov 28, 2022 at 21:13

answered Nov 23, 2022 at 21:53

Michel Floyd

20.3k4 gold badges27 silver badges45 bronze badges

3 Comments

Sasha Shpota Over a year ago

Thank you! Maybe I am missing something, but after adding @apollo/client to a fresh npm project, the word react occurs 22 times in its package-lock.json

Michel Floyd Over a year ago

Right, but you don't have to use react at all. Just use the client directly.

Sasha Shpota Over a year ago

Unfortunately it still requires adding React (fails if I don't do so).

Emmanuel Sarpong · Accepted Answer · 2022-12-10 11:24:28Z

1

I suppose this is exactly what you're after

https://www.npmjs.com/package/graphql-request

This is a link to their dependency list. It has no react dependency.

https://www.npmjs.com/package/graphql-request?activeTab=dependencies

Plus, it's also lightweight and has typescript support (should you need one).

answered Dec 10, 2022 at 11:24

Emmanuel Sarpong

881 silver badge10 bronze badges

1 Comment

Emmanuel Sarpong Over a year ago

Just as an aside, it also works pretty well with GraphQL Code Generator

Collectives™ on Stack Overflow

How to use graphql-js to call APIs from the client code?

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related