Member-only story
GraphQL Data fetching with Apollo Client in React
Using Apollo Client with GraphQL Queries to retrieve data in a React app
Learning things always takes time, and it’s hard to grasp the nuances of technology without getting your hands dirty. GraphQL is emerging as a popular way of using APIs in modern web and mobile applications.
I started learning GraphQL once 2 years ago, but for some reason I didn’t get a chance to continue. Soon I will start a new company project using GraphQL and with that in mind I created a simple, fun React app to refresh my knowledge. In this article I will share with you how to use Apollo Client with GraphQL queries to retrieve data.
What is GraphQL?
GraphQL is a data-oriented API query style, it was developed by Facebook as a solution to get data more efficiently.
What is Apollo Client?
Apollo Client is a comprehensive state management library for JavaScript that enables us to manage both local and remote data with GraphQL. 👉🏼Easier explained: frontend sends the GraphQL query to the Apollo Client, which processes the query and requests data from the GraphQL server, the server then sends the data back to the Apollo client which then stores and normalizes the data, finally the frontend receives the updates.
Why using GraphQL?
The traditional REST API has limitations of overfetching or underfetching. For example, if the endpoint holds data on a user, we may hit the /user endpoint, and instead of only getting the name that we are interested in, we may get everything that endpoint has to offer - including age, title, address, etc., so it’s very difficult to design the API in a way that it’s able to provide clients with their exact data needs.
With GraphQL, we have the ability to dictate exactly what we need from the server, and receive that data in a predictable way. GraphQL also gives API maintainers the flexibility to add or drop fields without affecting existing queries, developers can create APIs using any method.
Enough theory, let’s start getting our hands dirty.
*If you are lazy to create a new React project locally with Create React App, just jump straight to…
