Type safe GraphQL queries with genql

9 Aug 2021

import { createClient } from "../generated";

export const client = createClient({
  url: "https://api-eu-central-1.graphcms.com/v2/ckrvra12f06pb01z82dn2ebd4/master",
});
export const getStaticProps = async () => {
  const { products } = await client.query({
    products: {
      slug: true,
      name: true,
      image: {
        url: true,
      },
    },
  });

  return {
    props: {
      products,
    },
  };
};
export async function getStaticProps({ params }) {
  const { slug } = params;

  const { product } = await client.query({
    product: [
      {
        where: {
          slug,
        },
      },
      {
        name: true,
        description: true,
        price: true,
        image: {
          url: true,
        },
      },
    ],
  });

  return {
    props: {
      product,
    },
  };
}
export async function getStaticProps({ params }) {
  const { slug } = params;

  const product = await client.chain.query
    .product({ where: { slug } })
    .get({ ...everything, image: { ...everything } });

  return {
    props: {
      product,
    },
  };
}