Headless CMS for Next.js

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

// Initialize Apollo Client
const client = new ApolloClient({
  uri: 'https://api-<region>.hygraph.com/v2/<some hash>/master',
  cache: new InMemoryCache(),
});

// GraphQL query
const GET_PRODUCTS = gql`
  query GetProducts {
    products {
      name
      description
      image
      availability
      slug
    }
  }
`;

// Function to fetch data
export async function getProducts() {
  const { data } = await client.query({
    query: GET_PRODUCTS,
  });
  return data.products;
}

import { useEffect, useState } from 'react';
import { getProducts } from './api/graphql';

function ProductsPage() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function loadData() {
      const fetchedProducts = await getProducts();
      setProducts(fetchedProducts);
    }

    loadData();
  }, []);

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.slug}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            {/* Display product image and other details */}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductsPage;