Fetching Data from a GraphQL API

It's common to hear GraphQL described as a REST killer. Here to slash your REST services, to end your endpoints. But today, let's not focus on conflict. Let's consider where GraphQL and REST share something in common: HTTP requests.

That's right. If you know how to send HTTP requests, you already have the tools necessary to build a client application that communicates with any GraphQL API. We can get data using any method that sends an HTTP request. Let's build a tiny client by using fetch, which will work in the browser:

const query = `
  query {
    Lift(id: "panorama") {
      name
      status
    }
  }
`;

const url = "https://snowtooth.moonhighway.com/";

const opts = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ query })
};

fetch(url, opts)
  .then(res => res.json())
  .then(console.log)
  .catch(console.error);

We'll send the fetch request with some options. Then we'll convert the response to JSON. When we log the results to the console, we'll see the following:

results

{
  "data": {
    "Lift": {
      "name": "Panorama",
      "status": "HOLD"
    }
  }
}

You could even display your results on an HTML page by replacing the console.log with some simple DOM manipulation:

fetch(url, opts)
  .then(res => res.json())
  .then(
    ({ data }) => `
        <p>
          Favorite Lift: ${data.Lift.name} 
          Status: ${data.Lift.status}
        </p>
  `
  )
  .then(text => (document.body.innerHTML = text))
  .catch(console.error);

Mutations with fetch

Whenever we want to change data, we'll use a GraphQL mutation. Our API supports a mutation called setLiftStatus. This mutation takes in the id of the Lift you want to change and the new status for that lift. The options for LiftStatus are a GraphQL enum, a restricted list of options for a specific field. These options are OPEN, CLOSED, and HOLD. Start by defining the setLiftStatus mutation string as a variable:

const mutation = `
  mutation {
    setLiftStatus(id: "panorama", status: CLOSED) {
      name
      status
    }
  }
`;

Then we want to use the same GraphQL endpoint. We'll adjust the body of the request to include the mutation:

var url = "https://snowtooth.moonhighway.com/";

var opts = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ query: mutation })
};

Finally, we can send the request and log the results:

fetch(url, opts)
  .then(res => res.json())
  .then(console.log)
  .catch(console.error);

And our results will reflect that the Panorama lift status has indeed been changed by the mutation:

results

{
  "data": {
    "Lift": {
      "name": "Panorama",
      "status": "CLOSED"
    }
  }
}

graphql-request

There are other frameworks that can be used to send GraphQL operations to an API. One of the most minimal examples of this is graphql-request. GraphQL Request wraps fetch requests in a promise that can be used to make requests to the GraphQL server. It also handles the details of making the request and parsing the data for you. graphql-request is maintained by the team at Prisma.

To get started with graphql-request, you will need to install it:

npm install graphql-request --save

From there, you'll import and use the module as request:

import { request } from "graphql-request";

const query = `
  query {
    Trail(id: "grandma") {
      name
      status
    }
  }
`;

request("https://snowtooth.moonhighway.com/graphql", query)
  .then(console.log)
  .catch(console.error);

The request function takes in url and query, makes the request to the server, and returns the data in one line of code. The data returned is, as expected, a JSON response of all of the users:

{
  "Trail": {
    "name": "Grandma",
    "status": "OPEN"
  }
}

Notice that the results here are a little bit different than the fetch request. Instead of returning the data under the data key, the request sent with graphql-request returns just the object. If you wanted to use this data in your app, you would access that data off of the Trail key.

Working with GraphQL on the client doesn't require a tremendous amount of setup. Start with one of these options to start seeing the benefits of GraphQL immediately.

This post was originally published on the Moon Highway website.

Comments

[Precious Chicken]

This is a great introduction thank you. There is a lot of info out there about GraphQL itself; but when it comes to getting something quickly into HTML, just so you've got something to look at and kick the tyres, there is very little (or not without quickly going into a framework rabbit hole). Thanks (NB - I found it on moon highway first, but easier to comment here).

[Eve Porcello]

Thank you so much! Glad it was useful!