Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
Home/Blog/ Article - Fetch Data In React With GraphQL/
Home/Blog/Article - Fetch Data In R.../
Image by Joshua Sortino from Unsplash

Fetch Data In React With GraphQL

Feb 1, 2021
5 min read

DESCRIPTION

GraphQL introduces totally new concept for data fetching. One endpoint to rule them all, let's see how we can use it in React.

Introduction

So far we've covered various solutions for fetching data in React from REST API in this article. Additionally, I explained fetching data as user types in or clicks e.g. on a button in another article. However, GraphQL is an amazing alternative to REST (at least from the Frontend perspective 😅) that I enjoyed working with for the last 3 years and I couldn't stop myself from introducing you to the concept.
This article is a supplementary example for fetching data using GraphQL pokeAPI and browser fetch. I'll introduce you to the basics of it and we'll fetch my favorite Pokemon data which is OBVIOUSLY Charizard. 🔥 🔥 🔥

Get what you want

Wait for a second, one endpoint to rule them all? Get what you want? Yes, that's the beauty of GraphQL indeed.

The Query

GraphQL works with queries (fetching data) and mutations (add/delete/update data). We're solely focusing on queries in this article. As you can see in the above code, I'm just "telling" the server what I want to get, using the query keyword, pokemon name of the query with name variable as "charizard". Lastly, I'm specifying what to get from that pokemon query which is the name and front_default sprite.
Take a look at the pokeAPI Playground to "play" more with the concept. In REST, you would need to create separate endpoints for fetching different data and you'd always get all of it. (w/o filtering, pagination features, etc.) GraphQL query is elastic, you can minimize data fetching to what you need and write different queries for the same "query" (pokemon in this case). You could e.g. fetch more data on the details page and have just name and sprite on e.g. list page.

How to use the Query?

We're using the previously mentioned browser fetch. If it comes to GraphQL, you can check the GraphQL pokeAPI documentation for more information but body and method are the most important ones. We're still using the POST HTTP method as we would in REST API, but, when using it with GraphQL it's for fetching data (with a query) and not adding as it'd be with the REST API one. Our query is sent as part of the body using JSON.stringify as we don't want to send a JS direct object. Also, take a look at the endpoint, it'll always be the same, no /pokemon or /pokemons, just /graphql (always - yes, you can rename it). That's it.
For more complex GraphQL data management, I highly recommend apollo-client. Loading, error handling is out of the scope of this article. You could go through the 2 others previously mentioned to learn these topics. (with REST API but it's similar as apollo-client also has a useQuery hook)

Example Application

We've added a little bit of Material UI components, React hooks and displayed Charizard on the screen. Let's look at our result below.

Summary

Ok... 😅 The data fetching journey was fun. I still have caching and memoization concepts in my mind but there are just so many other things to write about. In the modern Frontend world there is a lot of exciting technologies, ain't it?
Big thanks for reading the article, you're awesome! 🙇‍♂️
You can also find me on:
Thanks for all the support. ❤️
THE GUIDE TO BEAT FRONTEND INTERVIEW
From time to time, I'll send you messages about new blog posts, knowledge pills, and mentoring promotions. Only valuable information, no spam included. You can unsubscribe at any time.
slack
Let's build a community that will help each other.
spread the word
You don't need to, it's okay...