Type Generation for Storefront API Graphql queries

Retired Boards Appdev Graphql Basics And Troubleshooting
,
1

Hello,

I’m using the Storefront API Client in my Nextjs app and it’s my first time working with Graphql. I’m wondering if theres a nice way to generate types for my queries to give me some assuredness when using the response data to update the DOM.

Here’s an example query from my project:

import gql from "graphql-tag";
import { print } from "graphql";

export const HOME_PAGE_COLLECTION_PRODUCTS_QUERY = print(gql`
  query HomePageCollectionProductsQuery($query: String!) {
    collections(first: 1, query: $query) {
      edges {
        node {
          id
          title
          products(first: 10) {
            edges {
              node {
                id
                title
                description
                priceRange {
                  minVariantPrice {
                    amount
                    currencyCode
                  }
                }
                images(first: 1) {
                  edges {
                    node {
                      url
                    }
                  }
                }
                productType
              }
            }
          }
        }
      }
    }
  }
`);

I’d like someway to capture the expected shape of the response, given that there’s so many edges and nodes. If you have any ideas it would be appreciated!

2

There is a way to generate types, especially if you use the Admin API node.js client here. There’s basic instructions here in the readme on how to generate types, and more detailed instructions here in the readme for the client preset library.

1 Like