Working with GraphQL and Hygraph in React

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.