Search⌘ K
AI Features
Home
Courses
React and GraphQL: Build an E-commerce App with Hygraph

Challenge: Fetching Content from Hygraph with GraphQL

Explore how to fetch categories and products from Hygraph using GraphQL queries and display them dynamically in a React e-commerce app. Learn to remove dummy data, use the useParams hook for dynamic routing of categories, and filter products displayed on category pages. This lesson helps you integrate content fetching with dynamic navigation for a functional shopping experience.

We'll cover the following...

In this challenge, you are required to perform two tasks.

Task 1: Fetch all categories from the Hygraph API

On our home page, we have a categories section. This category section is added via a component.

We added these images manually, but we want to get these images from our Hygraph content repository using the following GraphQL query:

JavaScript (JSX)
{
  categories {
    id
    image {
      url
    }
  }
}

Fetch and add all categories from the embedded content API to our React application. We’ll do this in the Categories component. Ensure you remove all dummy data so we can get all this ...