Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
GraphQL introduces totally new concept for data fetching. One endpoint to rule them all, let's see how we can use it in React.
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.
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
pokemonname of the query with
"charizard". Lastly, I'm specifying what to get from that
pokemonquery which is the
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" (
pokemonin 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
methodare the most important ones. We're still using the
POSTHTTP 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
queryis sent as part of the
JSON.stringifyas we don't want to send a JS direct object. Also, take a look at the endpoint, it'll always be the same, no
/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
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. ❤️
THE GUIDE TO BEAT FRONTEND INTERVIEW
Let's build a community that will help each other.