GraphQL

Using the Javascript Fetch API with GraphQL

Over the past few years, GraphQL has become the preeminent way to make APIs. As such queries to GraphQL APIs are becoming more and more prevalent across the web, but how do you do a request to a GraphQL API?

In this article, we'll look at the easiest way to do this with vanilla Javascript - via the fetch API.

GraphQL Request

For this example, we'll be assuming a very simple POST request for GraphQL, which uses one variable. Here is what I'm looking to request:

shell Copy
{ title(type: $type) age }

The variable I want to send is $type: 'post'.

Fetch API

Now let's put this into the fetch API. I'll cover two types, the version with variables, and the one without.

GraphQL Fetch API with Variables

We must define the variable before our query here, so we have the line query ($type: String) in our body as well. Apart from that we can send all the GraphQL data via the body of the request.

Variables are defined separately.

javascript Copy
fetch('http://localhost:4000/api', { method: 'POST', body: JSON.stringify({ query: `query ($type: String) { title(type: $type) articleAge }`, variables: { type: 'post' } }), headers: { 'content-type': 'application/json' } }).then(async (data) => { // Console log our return data console.log(await data.json()); });

GraphQL Fetch API without Variables

Similar to before, but we can totally omit the references to variables, and simply send our request in brackets:

javascript Copy
fetch('http://localhost:4000/api', { method: 'POST', body: JSON.stringify({ query: `{ title articleAge }` }), headers: { 'content-type': 'application/json' } }).then(async (data) => { // Console log our return data console.log(await data.json()); });
Last Updated Friday, 23 April 2021

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email