{"size": 989, "ext": "js", "max_stars_repo_path": "with-nextjs-image/pages/index.js", "max_stars_repo_name": "Dev-Elie/graphcms-examples", "max_stars_repo_stars_event_min_datetime": "2017-12-10T19:10:10.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T14:02:00.000Z", "max_issues_repo_path": "with-nextjs-image/pages/index.js", "max_issues_repo_name": "Dev-Elie/graphcms-examples", "max_issues_repo_issues_event_min_datetime": "2017-12-15T10:53:38.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-27T07:16:36.000Z", "max_forks_repo_path": "with-nextjs-image/pages/index.js", "max_forks_repo_name": "Dev-Elie/graphcms-examples", "max_forks_repo_forks_event_min_datetime": "2017-11-30T20:38:57.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-23T21:24:35.000Z"}
{"max_stars_count": 464, "max_issues_count": 79, "max_forks_count": 146, "avg_line_length": 19.78, "max_line_length": 79, "alphanum_fraction": 0.5247724975}
import Image from 'next/image';
import { GraphQLClient, gql } from 'graphql-request';

function IndexPage({ products }) {
  return (
    <div className="gap-6 grid grid-cols-1 md:grid-cols-3">
      {products.map((product) => (
        <div key={product.id}>
          <Image
            src={product.image.url}
            width={product.image.width}
            height={product.image.height}
          />
          <h2 className="font-semibold text-lg">{product.name}</h2>
        </div>
      ))}
    </div>
  );
}

export async function getStaticProps() {
  const graphcms = new GraphQLClient(
    'https://api-eu-central-1.graphcms.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master'
  );

  const { products } = await graphcms.request(
    gql`
      {
        products {
          id
          image {
            height
            url
            width
          }
          name
        }
      }
    `
  );

  return {
    props: {
      products,
    },
  };
}

export default IndexPage;
