From d0e00f7308e272d22379fd1fe64d2792eaa538de Mon Sep 17 00:00:00 2001
From: Ivan Artemiev <29709626+iartemiev@users.noreply.github.com>
Date: Fri, 14 Jun 2024 08:15:07 -0400
Subject: [PATCH] feat: add instructions for sharing schema between apps

---
 .../mono-and-multi-repos/index.mdx            | 36 ++++++++++++++++
 .../fullstack-branching/monorepos/index.mdx   | 43 +++++++++++++++++++
 2 files changed, 79 insertions(+)

diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx
index 951709b756c..3a763c06276 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/mono-and-multi-repos/index.mdx
@@ -164,3 +164,39 @@ frontend:
     paths:
       - node_modules/**/*
 ```
+
+<InlineFilter filters={['angular','javascript','nextjs','react','react-native','vue']}>
+## Sharing schema type definitions
+
+If you're using Amplify Data, we recommend adding a `paths` entry in the `tsconfig.json` of your frontend app that points to the `amplify/data/resource.ts` file in your backend app to easily access your schema type definitions from your frontend apps.
+
+First, cone your backend repo into the same parent directory as your frontend app, then add the following entry:
+
+```json title="tsconfig.json" showLineNumbers={false}
+{
+  "compilerOptions": {
+    "paths": {
+      "@/data-schema": ["../backend-app/amplify/data/resource"]
+    }
+  }
+}
+```
+
+You can then import the `Schema` type from this path in your frontend code to get code completion and strong typing for your API calls:
+
+```ts title="apps/admin-dashboard/page.tsx"
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "@/data-schema";
+
+const client = generateClient<Schema>();
+
+const createTodo = async () => {
+  await client.models.Todo.create({
+    content: window.prompt("Todo content?"),
+    isDone: false,
+  });
+}
+
+```
+
+</InlineFilter>
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
index 52fca62f1ad..56548cd3832 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
@@ -112,3 +112,46 @@ Once the sandbox environment is running, you would also generate the configurati
 </InlineFilter>
 
 - To locate the `App ID` for your backend application, navigate to the Amplify console and select your **backend-app**. On the Overview page, the `App ID` is displayed under the project name.
+
+<InlineFilter filters={['angular','javascript','nextjs','react','react-native','vue']}>
+
+```bash title="Terminal" showLineNumbers={false}
+npx ampx generate outputs --branch main --app-id BACKEND-APP-ID
+```
+</InlineFilter>
+
+
+<InlineFilter filters={['angular','javascript','nextjs','react','react-native','vue']}>
+
+## Sharing schema type definitions
+
+If you're using Amplify Data, we recommend adding a `paths` entry in your `tsconfig.json` file that points to the `amplify/data/resource.ts` file to easily access your schema type definitions from your frontend apps.
+
+```json title="tsconfig.json" showLineNumbers={false}
+{
+  "compilerOptions": {
+    "paths": {
+      "@/data-schema": ["./packages/my-shared-backend/amplify/data/resource"]
+    }
+  }
+}
+```
+
+You can then import the `Schema` type from this path in your frontend code to get code completion and strong typing for your API calls:
+
+```ts title="apps/admin-dashboard/page.tsx"
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "@/data-schema";
+
+const client = generateClient<Schema>();
+
+const createTodo = async () => {
+  await client.models.Todo.create({
+    content: window.prompt("Todo content?"),
+    isDone: false,
+  });
+}
+
+```
+
+</InlineFilter>