From 905e1e3e1caee7d35a29ff04866e32e00f46ab0d Mon Sep 17 00:00:00 2001
From: Liz Kenyon <elizabeth.kenyon@shopify.com>
Date: Fri, 10 Jan 2025 10:31:05 -0600
Subject: [PATCH] Add examples for codgen for UI extensions and functions

---
 .../api-clients/api-codegen-preset/README.md  | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/packages/api-clients/api-codegen-preset/README.md b/packages/api-clients/api-codegen-preset/README.md
index 28e1d6fc4a..357fa4b624 100644
--- a/packages/api-clients/api-codegen-preset/README.md
+++ b/packages/api-clients/api-codegen-preset/README.md
@@ -169,6 +169,84 @@ export default {
 };
 ```
 
+#### Example `.graphqlrc.ts` file with to generate types for UI extensions
+You can specify multiple APIs in your `.graphqlrc.ts` file by adding multiple projects.
+
+```js
+import { LATEST_API_VERSION } from "@shopify/shopify-api";
+import { shopifyApiProject, ApiType } from "@shopify/api-codegen-preset";
+import type { IGraphQLConfig } from "graphql-config";
+
+function getConfig() {
+  const config: IGraphQLConfig = {
+    projects: {
+      default: shopifyApiProject({
+        apiType: ApiType.Storefront,
+        apiVersion: LATEST_API_VERSION,
+        documents: ["./extensions/**/*.{js,ts,jsx,tsx}", "./extensions/.server/**/*.{js,ts,jsx,tsx}"],
+        outputDir: "./extensions/types",
+      }),
+      UIExtensions: shopifyApiProject({
+        apiType: ApiType.Admin,
+        apiVersion: LATEST_API_VERSION,
+        documents: ["./app/**/*.{js,ts,jsx,tsx}", "./app/.server/**/*.{js,ts,jsx,tsx}" ],
+        outputDir: "./app/types",
+      }),
+    },
+  };
+
+const config = getConfig();
+export default config;
+```
+
+
+### Example `graphqlrc.ts` file for autocompletion for Shopify Function Extensions
+```ts
+import fs from "fs";
+import { LATEST_API_VERSION } from "@shopify/shopify-api";
+import { shopifyApiProject, ApiType } from "@shopify/api-codegen-preset";
+import type { IGraphQLConfig } from "graphql-config";
+
+function getConfig() {
+  const config: IGraphQLConfig = {
+    projects: {
+      default: shopifyApiProject({
+        apiType: ApiType.Storefront,
+        apiVersion: LATEST_API_VERSION,
+        documents: ["./extensions/**/*.{js,ts,jsx,tsx}", "./extensions/.server/**/*.{js,ts,jsx,tsx}"],
+        outputDir: "./extensions/types",
+      }),
+  };
+
+  let extensions: string[] = [];
+  try {
+    extensions = fs.readdirSync("./extensions");
+    console.log(extensions, "extensions");
+  } catch {
+    // ignore if no extensions
+  }
+
+  for (const entry of extensions) {
+    console.log(entry, "entry");
+    const extensionPath = `./extensions/${entry}`;
+    const schema = `${extensionPath}/schema.graphql`;
+    if (!fs.existsSync(schema)) {
+      continue;
+    }
+    config.projects[entry] = {
+      schema,
+      documents: [`${extensionPath}/**/*.graphql`],
+    };
+  }
+
+
+  return config;
+}
+
+const config = getConfig();
+export default config;
+```
+
 ## Generating types
 
 Once you configure your app, you can run `graphql-codegen` to start parsing your queries for types.
@@ -198,6 +276,21 @@ npm run graphql-codegen
 pnpm graphql-codegen
 ```
 
+### Generating types for more than one API
+If you have specified more than one API in your `.graphqlrc.ts` file, you can run the script for each API by passing the `--project` [flag](https://the-guild.dev/graphql/codegen/docs/config-reference/multiproject-config#command-to-generate-files).
+
+```sh
+npm run graphql-codegen --project=UIExtensions
+```
+
+```sh
+yarn graphql-codegen --project=UIExtensions
+```
+
+```sh
+pnpm graphql-codegen --project=UIExtensions
+```
+
 > [!NOTE]
 > Codegen will fail if it can't find any documents to parse.
 > To fix that, either create a query or set the [`ignoreNoDocuments` option](https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config#configuration-options) to `true`.