storefrontapi.generated

[jamalsoueidan]

How do you regenerat "storefrontapi.generted.d.ts" when you make changes to the graphql queries?

Whenever i change the graphql fragment, it breaks the type in VSCODE, so i need to regenerate the file storefront.generated.d.ts

[frandiox]

You need to run Graphql Codegen for that. Basically, you can run it together with your dev server by passing the --codegen-unstable flag to the dev command. You can also run it separately with the codegen-unstable command (use --watch to keep the process alive).

Edit: a solution for the warnings when mixing Storefront API and Admin API is shown in #1003 (reply in thread)

[jamalsoueidan]

I see so it does actually generate it automatically, so my problem was to fix the warnings.

[jamalsoueidan]

So I added additional graphql definitions, but they are failing to get generated because StagedUploadInput is unknown type, where and how would I be able to add those types since they are not used in the demo-store, and i want to be able to use them?

const UPLOAD_CREATE = `#graphql
  mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
    stagedUploadsCreate(input: $input) {
      stagedTargets {
        resourceUrl
        url
        parameters {
          name
          value
        }
      }
      userErrors {
        field
        message
      }
    }
  }
`;

const FILE_CREATE = `#graphql
  mutation fileCreate($files: [FileCreateInput!]!) {
    fileCreate(files: $files) {
      files {
        fileStatus
        alt
      }
      userErrors {
        field
        message
      }
    }
  }
`;

Here is the error:
│ Error 0: Unknown type "StagedUploadInput". │
│ at app/routes/($locale).account.upload.tsx:2:41 │
│ Error 1: Cannot query field "stagedUploadsCreate" on type "Mutation". │
│ at app/routes/($locale).account.upload.tsx:3:5 │
│ Error 2: Unknown type "FileCreateInput". Did you mean "CustomerCreateInput"? │
│ at app/routes/($locale).account.upload.tsx:2:32 │
│ Error 3: Cannot query field "fileCreate" on type "Mutation". Did you mean "cartCreate"? │
│ at app/routes/($locale).account.upload.tsx:3:5 │
│ Error 4: Cannot query field "files" on type "QueryRoot". Did you mean "nodes" or "pages"? │
│ at app/routes/($locale).account.upload.tsx:3:5

[frandiox]

The storefrontapi.generated.d.ts only contains generated types for Storefront API. The types you are showing there are part of the Admin API, which are not used with Hydrogen's storefront client (context.storefront.query(...)).

How are you making requests to the Admin API? I assume you're using raw fetch for that?

The current unstable codegen doesn't support Admin API and it might be a bit tricky to get it working with it. You'd need to extract the Admin API queries in different files with a different filename pattern, and let Codegen know that it shouldn't crawl those files for Storefront API.

For example, say you put the admin queries in *.admin.ts files. Then, in a <root>/codegen.ts config file you'd need to add

 import type {CodegenConfig} from '@graphql-codegen/cli';
 import {preset, pluckConfig, schema} from '@shopify/hydrogen-codegen';

 export default <CodegenConfig>{
   overwrite: true,
   pluckConfig,
   generates: {
     ['storefrontapi.generated.d.ts']: {
       preset,
       schema,
       documents: ['app/**/!(*.admin).{ts,tsx}'],
     },
   },
 };

If I got the glob correct, that should crawl Storefront API queries in all TS files except those with .admin., which will prevent errors in storefrontapi.generated.d.ts file.

Let me know if that works 👍

[jamalsoueidan]

It works, nice 🥇 Thank you!