I want to edit Hydrogen's codegen.ts to fetch the Admin API schema.

[ujike-ryota]

Hello,
I need to use the Admin API in the Hydrogen project.
I read and tried to make changes based on this session, but it didn't work.

codegen.ts

import type {CodegenConfig} from '@graphql-codegen/cli';
import {pluckConfig, preset, getSchema} from '@shopify/hydrogen-codegen';
import {preset as adminApiPreset} from '@shopify/api-codegen-preset';

export default {
  overwrite: true,
  pluckConfig,
  generates: {
    'storefrontapi.generated.d.ts': {
      preset,
      schema: getSchema('storefront'),
      documents: [
        './*.{ts,tsx,js,jsx}',
        './app/**/*.{ts,tsx,js,jsx}',
        '!./app/graphql/customer-account/*.{ts,tsx,js,jsx}',
      ],
    },
    'customer-accountapi.generated.d.ts': {
      preset,
      schema: getSchema('customer-account'),
      documents: ['./app/graphql/customer-account/*.{ts,tsx,js,jsx}'],
    },
    'adminapi.generated.d.ts': {
      preset: adminApiPreset,
      plugins: ['typescript'],
      schema: 'https://shopify.dev/admin-graphql-direct-proxy',
    },
  },
} as CodegenConfig;

When I run yarn run codegen, I get the following error:

╭─ error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  [Codegen] Failed to load schema from                                        │
│  https://shopify.dev/admin-graphql-direct-proxy:                             │
│                                                                              │
│  introspectionResult.errors.map is not a function                            │
│  TypeError: introspectionResult.errors.map is not a function                 │
│  at getSchemaFromIntrospection                                               │
│  (file://node_modules/@graphql-tools/wrap/esm/introspect.js:9:58)            │
│  at file://node_modules/@graphql-tools/wrap/esm/introspect.js:32:32          │
│  at process.processTicksAndRejections                                        │
│  (node:internal/process/task_queues:95:5)                                    │
│  at async UrlLoader.load                                                     │
│  (file://node_modules/@graphql-tools/url-loader/esm/index.js:217:29)         │
│  at async file://node_modules/@graphql-tools/load/esm/load-typedefs/load-fi  │
│  le.js:11:39                                                                 │
│  at async Promise.all (index 5)                                              │
│  at async loadFile (file://node_modules/@graphql-tools/load/esm/load-typede  │
│  fs/load-file.js:9:9)                                                        │
│  at async file://node_modules/@graphql-tools/load/esm/load-typedefs/collect  │
│  -sources.js:163: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.                      │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Please help me 😭

[graygilmore]

You could get some inspiration from #1011

But also remember to add a documents attribute similar to the Custom Account API. You'll want to nest all Admin API calls in a folder like /graphql/admin/*.{ts,tsx,js,jsx} and then exclude that from the other configs.

You'll also want to make sure that you're passing a version to the Admin API URL like this: https://shopify.dev/docs/api/shopify-app-remix/v2/guide-graphql-types#configure

[ujike-ryota]

@graygilmore
We have set up documents and added the currently available API version to the schema URL, but the result has not changed.
I suspect that there might be a missing property needed to fetch the schema, but I prefer not to deviate from the existing format of codegen.ts as much as possible.
We need to understand the fundamental reason why the schema cannot be fetched from https://shopify.dev/admin-graphql-direct-proxy.