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.

[jamalsoueidan]

Its not fetching also for me anymore, it was working before.

[graygilmore]

I was able to get it working by running graphql-codegen directly instead of going through Hydrogen's CLI command. One tweak you'll want to make:

- import {preset as adminApiPreset} from '@shopify/api-codegen-preset';
+ import {preset as adminApiPreset, ApiType} from '@shopify/api-codegen-preset';

 'adminapi.generated.d.ts': {
   preset: adminApiPreset,
+  presetConfig: {
+    apiType: ApiType.Admin,
+  },
   plugins: ['typescript'],
   schema: 'https://shopify.dev/admin-graphql-direct-proxy',
 },

I then ran npx graphql-codegen --config .graphqlrc.ts and successfully generated the types.

[ujike-ryota]

I tried the suggested settings and the types were successfully generated 🎉

The CLI command could still be executed as before with yarn run codegen ( shopify hydrogen codegen ).
(If an error occurs here, it is likely that deleting node_modules and yarn.lock and reinstalling them will resolve the issue.)

The final settings are as follows:

import type {CodegenConfig} from '@graphql-codegen/cli';
import {pluckConfig, preset, getSchema} from '@shopify/hydrogen-codegen';
import {ApiType, 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}',
        '!./app/lib/zinniaClient.server.ts',
        '!./app/graphql/admin/*.{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,
      presetConfig: {
        apiType: ApiType.Admin,
      },
      plugins: ['typescript', 'typescript-operations'],
      schema: 'https://shopify.dev/admin-graphql-direct-proxy/2024-07',
      documents: ['./app/graphql/admin/*.{js,ts,jsx,tsx}'],
    },
  },
} as CodegenConfig;

I don't think there is any difference with the preset in @shopify/hydrogen-codegen, so I am using the same one.

The generated types can be used as shown below.

import {createAdminApiClient} from '@shopify/admin-api-client';
import {ADMIN_CUSTOMER_UPDATE_MUTATION} from '~/graphql/admin/AdminCustomerUpdateMutation';
import type {
  AdminCustomerUpdateMutation,
  AdminCustomerUpdateMutationVariables,
} from 'adminapi.generated';

const adminApiClient = createAdminApiClient({
  storeDomain: context.env.PUBLIC_STORE_DOMAIN,
  apiVersion: '2024-07',
  accessToken: context.env.PRIVATE_ADMIN_API_TOKEN,
});

const variables: AdminCustomerUpdateMutationVariables = {
  input: {
   .....
  },
};

const {data, errors} =
await adminApiClient.request<AdminCustomerUpdateMutation>(
  ADMIN_CUSTOMER_UPDATE_MUTATION,
  {
    variables,
  },
);

This is what i wanted.
Thank you for the information ❤️

[frandiox]

I think this would be the simplest:

// <root>/codegen.ts
import type {CodegenConfig} from '@graphql-codegen/cli';
import {pluckConfig, preset, getSchema} from '@shopify/hydrogen-codegen';
import {ApiType, shopifyApiTypes} 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/**/*.{ts,tsx,js,jsx}',
      ],
    },
    'customer-accountapi.generated.d.ts': {
      preset,
      schema: getSchema('customer-account'),
      documents: ['./app/graphql/customer-account/*.{ts,tsx,js,jsx}'],
    },
    ...shopifyApiTypes({
      apiType: ApiType.Admin,
      apiVersion: '2024-07',
      documents: ['./app/graphql/admin/*.{js,ts,jsx,tsx}']
    }),
  },
} as CodegenConfig;

---

Otherwise, you can also do what shopifyApiTypes is doing internally to modify its behavior: https://github.com/Shopify/shopify-app-js/blob/main/packages/api-clients/api-codegen-preset/src/api-types.ts

[ujike-ryota]

I confirmed that the settings you suggested also work correctly.
I didn't understand how to use @shopify/api-codegen-preset, so I learned a lot 🙌

However, since I want to use it the same way as the other generated files, I decided to add the items manually.

[frandiox]

FYI we are adding a way to do this directly in .graphqlrc.ts: #2311

[dvnrsn]

If I understand the hydrogen-react codegen readme correctly, in order to generate the admin api files, one will need to have their own codegen.ts that does something similar to the hydrogen-react codegen. Am I thinking about this correctly?