Working with GraphQL using Vanilla JS

Shlok Desai
Jan 22, 2019 · 3 min read

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!

Walmart Global Tech Blog

We’re powering the next great retail disruption.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store