Querying GraphQL back ends with fetch

One of the confusions that arise when getting started with GraphQL especially on the client side is the ability to talk to GraphQL back ends without using a graphql client like Apollo, Relay, urql e.t.c. This can make beginning with graphql a pain in the neck as you have to learn what the client you've chosen offers and how to set it up and use it the right way. This at times makes the learning curve steep and beginners at times don't get to appreciate what the libraries(clients) they use offer on top of GraphQL. They usually treat everything offered by the clients as part GraphQL. For example, I was personally talking to a developer who was telling me how using GraphQL is easier than REST, he told me that when using React and GraphQL on the client side you only need to wrap your component in a Query or Mutation component and get back the data, an error incase it occurs and even know whether your data is still loading or not. Of course I knew he was describing Apollo because I have ever used it.

In this blog post, I will be covering how to use the browser fetch api to make a query and a mutation on a graphql back end. In most implementations of graphql I have seen, GraphQL Mutations and Queries share many things in common some of which include:-

• They are made using the POST HTTP verb though some support GET
• The content type of a request that makes a mutation or a query is most of the times application/json as the query/mutation is sent as part of the JSON object

This means in order to make a simple query or mutation with fetch or any other http agent, all we need to do is make a HTTP POST request with Content-Type as application/json and the query or mutation as part of the request body. Lets see this in action.

Making a simple query

// construct our query
let query = `
    query getAllLinks {
        links {
            id
            url
            title
            createdAt
        }
    }
`;

let options = {
  // use the HTTP post method
  method: 'POST',

  // make the content-type application or json
  headers: { 'Content-Type': 'application/json' },

  // send the query as part of a JSON stringified body
  body: JSON.stringify({ query }),
};

fetch('https://the-linkmanager.herokuapp.com/linkmanager/', options)
  .then((res) => res.json())
  .then((data) => {
    // do whatever you want with the data
    console.log(data);
  });

Note: If you want to see how to send variables, see Making a Mutation below.

Making a Mutation

// the variables we want to pass in the mutation
let variables = {
  userName: 'the-den',
  email: 'dennisjjagwe@gmail.com',
  password: 'password',
  firstName: 'dennis',
  lastName: 'jjagwe',
};

// the mutation we want to make
let mutation = `
mutation createUser($userName:String!, $email:String!, $password:String!, $firstName:String, $lastName:String){
  createUser(username:$userName, email:$email, password:$password, firstName:$firstName, lastName:$lastName){
    user{
      id
      firstName
      lastName
    }
  }
}`;

let mutationOptions = {
  // use the HTTP post method
  method: 'POST',

  // make the content-type application or json
  headers: { 'Content-Type': 'application/json' },

  // send the mutation and variables as part of a JSON stringified body
  body: JSON.stringify({ query: mutation, variables }),
};

// make the mutation
fetch('https://the-linkmanager.herokuapp.com/linkmanager/', mutationOptions)
  .then((res) => res.json())
  .then((data) => {
    // do whatever you want with the data
    console.log(data);
  });

I hope this has been a simple introduction on how to send make a GraphQL query or a mutation. The code is almost the same that its even easy to write a single function to make both the query and the mutation. This can be done using any http agent like axios, jQuery ajax, XMLHTTPRequest, Apollo Fetch, node-fetch e.t.c.