Codegen does not work with storefront graphql anymore?

Hydrogen and Storefront APIs
1

I run into an issue with the Storefront types generation using codegen

codegen.yml:

overwrite: true
generates:
  # Admin API Types
  ./generated/admin-graphql.tsx:
    documents: "src/gql/admin/*.gql"           # Path to your .graphql files (queries/mutations)
    schema: "https://shopify.dev/admin-graphql-direct-proxy/2024-10"  # or provide a URL if you're using a remote schema
    plugins:
      - "typescript"
      - "typescript-operations"
  # Storefront API Types
  ./generated/storefront-graphql.tsx:
    documents: "src/gql/storefront/*.gql"           # Path to your .graphql files (queries/mutations)
    schema: "https://shopify.dev/storefront-graphql-direct-proxy/2024-10"  # or provide a URL if you're using a remote schema
    plugins:
      - "typescript"
      - "typescript-operations"

Running npx graphql-codegen --config codegen.yml

✔ Parse Configuration
⚠ Generate outputs
  ✔ Generate to ./generated/admin-graphql.tsx
  ❯ Generate to ./generated/storefront-graphql.tsx
    ✖
      Failed to load schema from https://shopify.dev/storefront-graphql-direct-proxy/2024-10:
      Could not obtain introspection result, received the following as response;
      { data: { directive: { fields: [Array] }, field: { fields: [Array] }, type: { fields: [Array] }, inputValue: { fields: [Array] } } }
      GraphQLError: Could not obtain introspection result, received the following as response;
      { data: { directive: { fields: [Array] }, field: { fields: [Array] }, type: { fields: [Array] }, inputValue: { fields: [Array] } } }
      at createGraphQLError (/Users/user/Documents/nextjs-proj/node_modules/@graphql-tools/utils/cjs/errors.js:31:12)
      at getSchemaFromIntrospection (/Users/user/Documents/nextjs-proj/node_modules/@graphql-tools/wrap/cjs/introspect.js:20:42)
      at /Users/user/Documents/nextjs-proj/node_modules/@graphql-tools/wrap/cjs/introspect.js:35:32
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async UrlLoader.load (/Users/user/Documents/nextjs-proj/node_modules/@graphql-tools/url-loader/cjs/index.js:220:29)
      at async /Users/user/Documents/nextjs-proj/node_modules/@graphql-tools/load/cjs/load-typedefs/load-file.js:14:39
      at async Promise.all (index 5)
      at async loadFile (/Users/user/Documents/nextjs-proj/node_modules/@graphql-tools/load/cjs/load-typedefs/load-file.js:12:9)
      at async /Users/user/Documents/nextjs-proj/node_modules/@graphql-tools/load/cjs/load-typedefs/collect-sources.js:191:25
      GraphQL Code Generator supports:
      - ES Modules and CommonJS exports (export as default or named export "schema")
      - Introspection JSON File
      - URL of GraphQL endpoint
      - Multiple files with type definitions (glob expression)
      - String in config file
      Try to use one of above options and run codegen again.
    ◼ Load GraphQL documents
    ◼ Generate

Result: it generates admin schema but not storefront schema.

2

And now it started to work without me changing anything :woman_facepalming:

3

That’s concerning. Please let us know if you see it again.

4

I am getting the same error again without changing anything in my code:

2025-01-09 18:51:18 > graphql-codegen --config codegen.yml
2025-01-09 18:51:18 
2025-01-09 18:51:19 [STARTED] Parse Configuration
2025-01-09 18:51:19 [SUCCESS] Parse Configuration
2025-01-09 18:51:19 [STARTED] Generate outputs
2025-01-09 18:51:19 [STARTED] Generate to ./generated/admin-graphql.tsx
2025-01-09 18:51:19 [STARTED] Generate to ./generated/storefront-graphql.tsx
2025-01-09 18:51:19 [STARTED] Load GraphQL schemas
2025-01-09 18:51:19 [STARTED] Load GraphQL schemas
2025-01-09 18:51:19 [FAILED] 
2025-01-09 18:51:19 [FAILED]         Failed to load schema from https://shopify.dev/storefront-graphql-direct-proxy/2024-10:
2025-01-09 18:51:19 [FAILED] 
2025-01-09 18:51:19 [FAILED]         Could not obtain introspection result, received the following as response; 
2025-01-09 18:51:19 [FAILED]  { data: { directive: { fields: [Array] }, field: { fields: [Array] }, type: { fields: [Array] }, inputValue: { fields: [Array] } } }
2025-01-09 18:51:19 [FAILED]         GraphQLError: Could not obtain introspection result, received the following as response; 
2025-01-09 18:51:19 [FAILED]  { data: { directive: { fields: [Array] }, field: { fields: [Array] }, type: { fields: [Array] }, inputValue: { fields: [Array] } } }
2025-01-09 18:51:19 [FAILED]     at createGraphQLError (/app/node_modules/@graphql-tools/utils/cjs/errors.js:31:12)
2025-01-09 18:51:19 [FAILED]     at getSchemaFromIntrospection (/app/node_modules/@graphql-tools/wrap/cjs/introspect.js:20:42)
2025-01-09 18:51:19 [FAILED]     at /app/node_modules/@graphql-tools/wrap/cjs/introspect.js:35:32
2025-01-09 18:51:19 [FAILED]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2025-01-09 18:51:19 [FAILED]     at async UrlLoader.load (/app/node_modules/@graphql-tools/url-loader/cjs/index.js:220:29)
2025-01-09 18:51:19 [FAILED]     at async /app/node_modules/@graphql-tools/load/cjs/load-typedefs/load-file.js:14:39
2025-01-09 18:51:19 [FAILED]     at async Promise.all (index 5)
2025-01-09 18:51:19 [FAILED]     at async loadFile (/app/node_modules/@graphql-tools/load/cjs/load-typedefs/load-file.js:12:9)
2025-01-09 18:51:19 [FAILED]     at async /app/node_modules/@graphql-tools/load/cjs/load-typedefs/collect-sources.js:191:25
2025-01-09 18:51:19 [FAILED] 
2025-01-09 18:51:19 [FAILED]         GraphQL Code Generator supports:
2025-01-09 18:51:19 [FAILED]           - ES Modules and CommonJS exports (export as default or named export "schema")
2025-01-09 18:51:19 [FAILED]           - Introspection JSON File
2025-01-09 18:51:19 [FAILED]           - URL of GraphQL endpoint
2025-01-09 18:51:19 [FAILED]           - Multiple files with type definitions (glob expression)
2025-01-09 18:51:19 [FAILED]           - String in config file
2025-01-09 18:51:19 [FAILED] 
2025-01-09 18:51:19 [FAILED]         Try to use one of above options and run codegen again.
2025-01-09 18:51:19 [FAILED] 
2025-01-09 18:51:19 [FAILED]

codegen.yml:

overwrite: true
generates:
  # Admin API Types
  ./generated/admin-graphql.tsx:
    documents: "src/gql/admin/*.gql"
    schema: "https://shopify.dev/admin-graphql-direct-proxy/2024-10"  # or provide a URL if you're using a remote schema
    plugins:
      - "typescript"
      - "typescript-operations"
  # Storefront API Types
  ./generated/storefront-graphql.tsx:
    documents: "src/gql/storefront/*.gql"
    schema: "https://shopify.dev/storefront-graphql-direct-proxy/2024-10"  # or provide a URL if you're using a remote schema
    plugins:
      - "typescript"
      - "typescript-operations"

I am using:
“@graphql-codegen/typescript”: “^4.1.0”,
“@graphql-codegen/typescript-operations”: “^4.3.0”,
“@graphql-codegen/cli”: “^5.0.3”,

It’s basically failing on storefront schema generation. Works for admin schema though.

5

And now it works again. I guess the shopify storefront graphql had some problems.
Why does it happen though?

6

I’ve had issues using this “admin-graphql-direct-proxy”.

This is what I do instead (you need to pull in your API Key from your environment).

const STOREFRONT_SCHEMA = {
  [`https://${SHOP_NAME}.myshopify.com/api/2025-01/graphql.json`]: {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/graphql-response+json",
      "X-Shopify-Storefront-Access-Token": STOREFRONT_ACCESS_TOKEN,
    },
  },
};

const config: CodegenConfig = {
  generates: {
    "./src/shopify/lib/storefront/": {
      documents: [
        "./src/shopify/graphql/**/*.{js,ts,jsx,tsx}",
        "./src/app/**/*.{js,ts,jsx,tsx}",
      ],
      schema: [STOREFRONT_SCHEMA],
      preset: "client",
      presetConfig: {
        fragmentMasking: false,
      },
      config: {
        documentMode: "string",
      },
    }
}
7

Why does it work without changing a line then?
My code works. Just Shopify has outage and poor infrastructure.

8

Yeah it’s a bit odd, i don’t know why they’re recommending this proxy endpoint for schema generation.

Usually you just pull the schema with an introspection query directly from the GraphQL API endpoint.

My guess as is that this endpoint isn’t very well supported.