Working with GraphQL and Hygraph in React
Learn how to use GraphQL in React.
We'll cover the following
Previously, we learned that GraphQL is a query language for querying what we want from an API and that it returns the requested data. Hygraph is a unique content management system that allows us to fetch content (data) from a content repository via an API. A unique feature of Hygraph is that we can interact and fetch this data from the API via GraphQL.
For our e-commerce application, we’ll be pulling all our products (shoes) and more information from Hygraph by using GraphQL to query for this data. Currently, we have an e-commerce application that is not functional because all its data is only markup.
If we check our package.json
file, we'll see a list of all installed dependencies in the dependencies
object. But now we want to install the packages that we'll use to fetch that data from the Hygraph content repository we already created.
Install packages
For us to make use of GraphQL and fetch content from Hygraph within our React application, we first have to install some packages like graphql
itself and graphql-request
for fetching content from Hygraph.
Get hands-on with 1200+ tech skills courses.