Working with GraphQL using Vanilla JS

GraphQL is one of the most exciting new technologies to emerge in recent years. It is a great tool for developers to control the data they need from an API. The fundamental idea behind GraphQL is

`Getting what you need, nothing more, nothing less`

This concept can help to make your API payloads minimal and helps developers to request the data that they would need in the application rather than being driven by the server.

Now, let’s say we’re writing a web application that fetches data from a GraphQL endpoint and uses it to render a webpage. What would be the first solution that comes to mind?

npm i <popular-graphql-client-library> ?

Now, before you go bloating up your node_modules folder, think about your use case. Do you really want to pay the library tax? Especially if you can solve your problem without any external dependencies at all?

Although there are valid cases for using libraries like Apollo or Relay, they need not be the go-to solution for communicating with a GraphQL API. Writing a light GraphQL client can be made simpler using vanilla JavaScript features like fetch, promises and string templates. Some example scenarios would be building a thin client with minimal dependencies or building out a prototype solution.

Let’s build a simple form that can communicate with a GraphQL API and search titles of books. We will only use HTML5, CSS3 and ES6 JavaScript.

First, I have a GraphQL server running on localhost:3000that returns a list of five books.

I have a simple HTML page with a few styles

Now, in our script.jsfile, we will select our form and add an event listener.

const bookContainer = document.querySelector("#book-container");
const form = document.querySelector("#book-search");
const loadBooks = (ev) => {
  ev.preventDefault();
}
form.addEventListener("submit", loadBooks)

The loadBooksfunction will call the GraphQL API using the native fetch. But before that, let’s add a function to construct the query.

const getBooksQuery = keyword => `{ allBooks(filter: { q:"${keyword}"}) { author title url } }`;

Our query builder function returns a string that will search book titles by keyword and return a list of matches. We achieve this by using a filter within the query. As we’re only interested in the author information, the title of the book and the URL for rendering the list of books, we request only those fields from our GraphQL server. This is how GraphQL helps us in getting only the data we need.

We’ll flesh out the call to the server in the submit handler.

First, we get the search keyword value from the input form and create an options object to send a POST request. We pass the keyword to our query builder function and get the query string that needs to be passed back to the GraphQL API. We add a renderBooks method that will show the list of books in a simple card view.

Here’s how it looks in full.

The final result:

Some other use cases that can be handled are:

• Using fragments — We can have functions returning strings as fragments and simply add it to the main query as needed.
• Multiple queries — Each query can be written as its own function.

And that’s it. You can now communicate with a GraphQL server and keep your client-side code as minimal as possible with zero dependencies. Go forth and build awesome things!