Type safe GraphQL queries with genql

Write type safe GraphQL queries with auto completion and type validation using genql.

Notes

1import { createClient } from "../generated";
2
3export const client = createClient({
4 url:
5 "https://api-eu-central-1.graphcms.com/v2/ckrvra12f06pb01z82dn2ebd4/master",
6});
7
1export const getStaticProps = async () => {
2 const { products } = await client.query({
3 products: {
4 slug: true,
5 name: true,
6 image: {
7 url: true,
8 },
9 },
10 });
11
12 return {
13 props: {
14 products,
15 },
16 };
17};
18
1export async function getStaticProps({ params }) {
2 const { slug } = params;
3
4 const { product } = await client.query({
5 product: [
6 {
7 where: {
8 slug,
9 },
10 },
11 {
12 name: true,
13 description: true,
14 price: true,
15 image: {
16 url: true,
17 },
18 },
19 ],
20 });
21
22 return {
23 props: {
24 product,
25 },
26 };
27}
28
1export async function getStaticProps({ params }) {
2 const { slug } = params;
3
4 const product = await client.chain.query
5 .product({ where: { slug } })
6 .get({ ...everything, image: { ...everything } });
7
8 return {
9 props: {
10 product,
11 },
12 };
13}
14