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.