How to use api-codegen-preset in checkout UI extensions?

[nboliver-ventureweb]

Is it possible to use api-codegen-preset within a checkout UI extension? I tried setting it up according to the docs, but it didn't work.

Here is the .graphqlrc.ts:

import { ApiType, shopifyApiProject } from '@shopify/api-codegen-preset';

// See https://www.npmjs.com/package/@shopify/storefront-api-client
export default {
  schema: 'https://shopify.dev/storefront-graphql-direct-proxy/2024-04',
  documents: ['./src/**/*.{js,ts,jsx,tsx}'],
  projects: {
    default: shopifyApiProject({
      apiType: ApiType.Storefront,
      apiVersion: '2024-04',
      documents: ['./src/**/*.{js,ts,jsx,tsx}'],
      outputDir: './types',
    }),
  },
};

Here is the output:

✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate to ./types/storefront-2024-04.schema.json
    ✔ Load GraphQL schemas
    ✖
      Unable to find any GraphQL type definitions for the following pointers:
      - ./src/**/*.{js,ts,jsx,tsx}
    ◼ Generate
  ❯ Generate to ./types/storefront.types.d.ts
    ✔ Load GraphQL schemas
    ✖
      Unable to find any GraphQL type definitions for the following pointers:
      - ./src/**/*.{js,ts,jsx,tsx}
    ◼ Generate
  ❯ Generate to ./types/storefront.generated.d.ts
    ✔ Load GraphQL schemas
    ✖
      Unable to find any GraphQL type definitions for the following pointers:
      - ./src/**/*.{js,ts,jsx,tsx}
    ◼ Generate

Am I missing something, or does it not work in a UI extension? I double checked the paths were correct. I confirmed the query was named:

      const { data } = await query(
        `#graphql 
        query getProductsOnOffer($handle: String!, $first: Int!) {
          collection(handle: $handle) {
            products(first: $first) {
              nodes {
                id
                title
                images(first:1){
                  nodes {
                    url
                  }
                }
                variants(first: 1) {
                  nodes {
                    id
                    price {
                      amount
                    }
                  }
                }
              }
            }
          }
        }`,
        {
          variables: { handle: 'automated-collection', first: 5 },
        },
      );

[matteodepalo]

Hi @nboliver-ventureweb, what version of api-codegen-preset are you using?