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?

[github-actions[bot]]

We are closing this issue because we did not hear back regarding additional details we needed to resolve this issue. If the issue persists and you are able to provide the missing clarification we need, feel free to respond and reopen this issue.

We appreciate your understanding as we try to manage our number of open issues.

[pinktonio]

@nboliver-ventureweb were you able to fix it?

[nboliver-ventureweb]

@matteodepalo I'm not sure what version it was, it would have been the latest version out when this ticket was created. I have since removed it from the project because it wasn't working.

@pinktonio No, I haven't had a chance to revisit it, but would be keen to get it working!

[pinktonio]

I tried multiple versions. 1.0.1, 1.0.0 and 0.0.7 but couldn't get it to work. It couldn't find any of my #graphql comments on my named queries and mutations.

[matteodepalo]

Did you try adding the extension pluckConfig as described here? https://github.com/Shopify/shopify-app-js/blob/5134bcc4344fe42518873ec1b2d213a435948e11/packages/api-clients/api-codegen-preset/README.md#example-graphqlrcts-file

[pinktonio]

@matteodepalo Yes I did.

I finally got it to work by using the /* GraphQL */ comment before my graphql code instead of #graphql inside the code.

[ujike-ryota]

I had the same issue, but I was able to resolve it. I hope this helps others as well.

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

export default {
  schema: 'https://shopify.dev/admin-graphql-direct-proxy',
  documents: ['src/graphql/*.ts'], // This doesn't work
  projects: {
    default: shopifyApiProject({
      apiType: ApiType.Admin,
      apiVersion: '2024-10',
      outputDir: './types',
      documents: ['src/graphql/*.ts'], // This configuration works
    }),
    documents: ['src/graphql/*.ts'], // This doesn't work
  },
};

This is my configuration file. One thing to be careful about is that you need to include documents within shopifyApiProject. If you don't, the path you reference will be overwritten, and **/*.{ts,tsx} will always be referenced.

// src/graphql/query.ts
export const SHOP_QUERY = /* GraphQL */ `
  query Shop {
    shop {
      name
    }
  }
`;

This is the query I wrote. There is another important thing to note here: you must use /* GraphQL */ as the magic comment instead of #graphql. While #graphql was referenced when I was working with Hydrogen, for some reason, @shopify/api-codegen-preset's pluckConfig doesn't seem to function correctly.

[matteodepalo]

Glad you hear that you've solved this! I'm going to close this issue then.

[nboliver-ventureweb]

@ujike-ryota Thanks for providing that code example. I'll try implementing the same way 🤞

@matteodepalo Given that the working configuration differs from what it listed in the @shopify/api-codegen-preset docs, perhaps it would be helpful to add some specific documentation to this repo in the hopes of making the setup easy for others to figure out?

[matteodepalo]

@nboliver-ventureweb good point, I'll reopen this so that we can keep track of the change to the docs.