Using a GraphQL API in React

How to fetch data from an API using GraphQL in a React App

Of course everyone is familiar with REST APIs, but there is another type of API that is becoming increasingly popular and that is the GraphQL API. GraphQL is a data query language for APIs. The significant difference between GraphQL APIs and REST APIs is that in a GraphQL API, we explicitly indicate in our query which specific data we want to fetch and request. In a REST API, we get back all the data from a url endpoint. Thus, GraphQL saves us some time by giving us more control over which data we want to request and receive from the API.

The first time I encountered GraphQL was when I was learning how to create a Gatsby.js app; it uses GraphQL to access your app data. I’ve also attended a workshop where I learned how to build a GraphQL API using MongoDB and Node.js. Naturally, the next logical step in my GraphQL expedition would be to use GraphQL with a frontend library like, React.

In this blog, I’ll be using a GraphQL API called Artsy. Artsy is a massive API and very fun to navigate through especially if you’re an art lover like me. The goal is to fetch all the artworks from two of my favorite artists, Pablo Picasso and Banksy, determine which artworks are for sale, and list their prices. All this data rendered on a React app. If Picasso and Banksy don’t really fit your tastes, you…