Fetch Data In React With GraphQL

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. 🔥 🔥 🔥

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

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.

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)

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.

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. ❤️