import { GraphQLClient } from 'graphql-request';

const client = new GraphQLClient(`https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2023-07/graphql.json`, {
  headers: {
    'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
  },
});
export async function fetchShopifyData(query, variables = {}) {
    try {
      return await client.request(query, variables);
    } catch (error) {
      console.error('Shopify API request failed:', error);
      throw error;
    }
  }
export default client;

import { fetchShopifyData } from './lib/shopify';
import Image from 'next/image';

const PRODUCTS_QUERY = `
  {
    products(first: 10) {
      edges {
        node {
          id
          title
          description
          handle
          images(first: 1) {
            edges {
              node {
                src
              }
            }
          }
        }
      }
    }
  }
`;

export default async function Home() {
  try {
    const data = await fetchShopifyData(PRODUCTS_QUERY);
    return (
      <div>
        <h1 className="text-3xl font-bold">Products</h1>
        <ul>
          {data.products.edges.map(({ node }) => (
            <li key={node.id} className="m-4 p-4 border rounded">
              <h2>{node.title}</h2>
              <p>{node.description}</p>
              {node.images.edges[0] && (
                <Image
                  src={node.images.edges[0].node.url}
                  alt={node.title}
                  width={500}
                  height={500}
                />
              )}
            </li>
          ))}
        </ul>
      </div>
    );
  } catch (error) {
    console.error('Failed to fetch products: ', error);
    return <p>Error loading products</p>;
  }
}