How to use api-codegen-preset in checkout UI extensions? #1081
Closed
Description
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 },
},
);Metadata
Assignees
Labels
No labels