Using the Javascript Fetch API with GraphQL

📣 Sponsor

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:


{
  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.


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:


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 1619197334345