Schema Type for the data model not being correctly shown by typecscript

crafael23 commented 4 months ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Not applicable

Amplify Version

v6

Amplify Categories

api

Backend

Amplify Gen 2 (Preview)

Environment information

``` # Put output below this line System: OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) CPU: (16) x64 AMD Ryzen 9 6900HS with Radeon Graphics Memory: 3.87 GB / 11.31 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm pnpm: 9.1.1 - ~/.nvm/versions/node/v20.11.1/bin/pnpm Browsers: Chrome: 125.0.6422.141 npmPackages: @aws-amplify/adapter-nextjs: ^1.1.8 => 1.1.8 @aws-amplify/backend: ^1.0.2 => 1.0.2 @aws-amplify/backend-cli: ^1.0.3 => 1.0.3 @aws-amplify/ui-react: ^6.1.12 => 6.1.12 @aws-sdk/client-cognito-identity-provider: ^3.583.0 => 3.583.0 @hookform/resolvers: ^3.4.2 => 3.4.2 @radix-ui/react-accordion: ^1.1.2 => 1.1.2 @radix-ui/react-alert-dialog: ^1.0.5 => 1.0.5 @radix-ui/react-aspect-ratio: ^1.0.3 => 1.0.3 @radix-ui/react-avatar: ^1.0.4 => 1.0.4 @radix-ui/react-checkbox: ^1.0.4 => 1.0.4 @radix-ui/react-collapsible: ^1.0.3 => 1.0.3 @radix-ui/react-context-menu: ^2.1.5 => 2.1.5 @radix-ui/react-dialog: ^1.0.5 => 1.0.5 @radix-ui/react-dropdown-menu: ^2.0.6 => 2.0.6 @radix-ui/react-hover-card: ^1.0.7 => 1.0.7 @radix-ui/react-label: ^2.0.2 => 2.0.2 @radix-ui/react-menubar: ^1.0.4 => 1.0.4 @radix-ui/react-navigation-menu: ^1.1.4 => 1.1.4 @radix-ui/react-popover: ^1.0.7 => 1.0.7 @radix-ui/react-progress: ^1.0.3 => 1.0.3 @radix-ui/react-radio-group: ^1.1.3 => 1.1.3 @radix-ui/react-scroll-area: ^1.0.5 => 1.0.5 @radix-ui/react-select: ^2.0.0 => 2.0.0 @radix-ui/react-separator: ^1.0.3 => 1.0.3 @radix-ui/react-slider: ^1.1.2 => 1.1.2 @radix-ui/react-slot: ^1.0.2 => 1.0.2 @radix-ui/react-switch: ^1.0.3 => 1.0.3 @radix-ui/react-tabs: ^1.0.4 => 1.0.4 @radix-ui/react-toast: ^1.1.5 => 1.1.5 @radix-ui/react-toggle: ^1.0.3 => 1.0.3 @radix-ui/react-toggle-group: ^1.0.4 => 1.0.4 @radix-ui/react-tooltip: ^1.0.7 => 1.0.7 @t3-oss/env-nextjs: ^0.10.1 => 0.10.1 @tanstack/react-table: ^8.17.3 => 8.17.3 @types/aws-lambda: ^8.10.138 => 8.10.138 @types/eslint: ^8.56.10 => 8.56.10 @types/node: ^20.12.12 => 20.12.12 @types/react: ^18.3.2 => 18.3.2 @types/react-dom: ^18.3.0 => 18.3.0 @typescript-eslint/eslint-plugin: ^7.10.0 => 7.10.0 @typescript-eslint/parser: ^7.10.0 => 7.10.0 aws-amplify: ^6.3.2 => 6.3.2 aws-cdk: ^2.142.1 => 2.142.1 aws-cdk-lib: ^2.142.1 => 2.142.1 aws-lambda: ^1.0.7 => 1.0.7 aws-sdk: ^2.1628.0 => 2.1628.0 axios: ^1.7.2 => 1.7.2 class-variance-authority: ^0.7.0 => 0.7.0 clsx: ^2.1.1 => 2.1.1 cmdk: ^1.0.0 => 1.0.0 constructs: ^10.3.0 => 10.3.0 date-fns: ^3.6.0 => 3.6.0 embla-carousel-react: ^8.1.3 => 8.1.3 esbuild: ^0.21.3 => 0.21.3 eslint: ^8.57.0 => 8.57.0 eslint-config-next: ^14.2.3 => 14.2.3 geist: ^1.3.0 => 1.3.0 input-otp: ^1.2.4 => 1.2.4 lucide-react: ^0.378.0 => 0.378.0 next: ^14.2.3 => 14.2.3 next-themes: ^0.3.0 => 0.3.0 postcss: ^8.4.38 => 8.4.38 prettier: ^3.2.5 => 3.2.5 prettier-plugin-tailwindcss: ^0.5.14 => 0.5.14 react: 18.2.0 => 18.2.0 react-day-picker: ^8.10.1 => 8.10.1 react-dom: 18.2.0 => 18.2.0 react-hook-form: ^7.51.5 => 7.51.5 react-resizable-panels: ^2.0.19 => 2.0.19 sonner: ^1.4.41 => 1.4.41 tailwind-merge: ^2.3.0 => 2.3.0 tailwindcss: ^3.4.3 => 3.4.3 tailwindcss-animate: ^1.0.7 => 1.0.7 tsx: ^4.10.5 => 4.10.5 typescript: ^5.4.5 => 5.4.5 vaul: ^0.9.1 => 0.9.1 xlsx: https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz => 0.20.2 zod: ^3.23.8 => 3.23.8 npmGlobalPackages: @ionic/cli: 7.2.0 @nestjs/cli: 10.3.2 corepack: 0.23.0 create-vite: 5.2.3 lite-server: 2.6.1 liteserver: 0.3.0 npm: 10.2.4 turbo: 1.12.5 ```

Describe the bug

Im trying to type a variable based on the schema described on the amplify backend files and it is adding a Key named Type that prevents me from properly utilizing the type system correctly

As seen in the image above that type: field shouldnt be there and it is causing the following error when trying to assign an object which was queried directly from the backend properly and should be that exact same object.

This prevents me from typing other variables correctly for me to for example pass the object as a prop towards a function or component.

The Schema type is being declared exactly as the documentation instructs.

Expected behavior

The expected behavior, would be , as the example proyect done by ErickCH in this repository, that when invoking Schema["AnyField"] for it to return only the types for the schema without that type key field which disrupts everything

In this image we can see that the type for Post is being properly assigned to the parameter

This is that proyect's package.json dependencies. "dependencies": { "@aws-amplify/adapter-nextjs": "^1.0.8", "@aws-amplify/ui-react": "^6.0.7", "aws-amplify": "^6.0.8", "next": "14.0.4", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@aws-amplify/backend": "^0.6.0", "@aws-amplify/backend-cli": "^0.9.2", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5.3.3"

Reproduction steps

Describe the data's modle schema and export it

const schema = a.schema({
  Tenant: a
    .model({
      Empresa: a.string(),
      TenantID: a.string().required(),
      GupshupApps: a.hasMany("GupshupApps", "TenantId"),
      // Users: a.hasMany("User", "TenantId"),
      Messages: a.hasMany("Message", "TenantOwner"),
      Campaigns: a.hasMany("Campaign", "TenantId"),
    })
    .authorization((allow) => [allow.authenticated()]),

  GupshupApps: a
    .model({
      Nombre: a.string().required(),
      AppID: a.string().required(),
      AppToken: a.string().required(),
      PartnerAppToken: a.string().required(),
      TenantId: a.id().required(),
      tenant: a.belongsTo("Tenant", "TenantId"),
      Campaigns: a.hasMany("Campaign", "gupshupAppId"),
    })
    .authorization((allow) => [allow.authenticated()]),
});

export type Schema = ClientSchema<typeof schema>;

Go to any other file or component and try to use that schema for a specific table as a type

import { type Schema } from "amplify/data/resource";

export function GupshupApp({ app }: { app: Schema["GupshupApps"] }) {

....more code

return(<></>)
}

Observe the type being assigned via the schema to the parameter

Code Snippet

No response

Log output

No response

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

package.json

{
  "name": "proyectname",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "next build",
    "dev": "next dev --turbo",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@aws-amplify/adapter-nextjs": "^1.1.8",
    "@aws-amplify/ui-react": "^6.1.12",
    "@aws-sdk/client-cognito-identity-provider": "^3.583.0",
    "@hookform/resolvers": "^3.4.2",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-context-menu": "^2.1.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-toggle-group": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@t3-oss/env-nextjs": "^0.10.1",
    "@tanstack/react-table": "^8.17.3",
    "@types/aws-lambda": "^8.10.138",
    "aws-amplify": "^6.3.2",
    "aws-lambda": "^1.0.7",
    "aws-sdk": "^2.1628.0",
    "axios": "^1.7.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.1.3",
    "geist": "^1.3.0",
    "input-otp": "^1.2.4",
    "lucide-react": "^0.378.0",
    "next": "^14.2.3",
    "next-themes": "^0.3.0",
    "react": "18.2.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.51.5",
    "react-resizable-panels": "^2.0.19",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.1",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.0.2",
    "@aws-amplify/backend-cli": "^1.0.3",
    "@types/eslint": "^8.56.10",
    "@types/node": "^20.12.12",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.10.0",
    "@typescript-eslint/parser": "^7.10.0",
    "aws-cdk": "^2.142.1",
    "aws-cdk-lib": "^2.142.1",
    "constructs": "^10.3.0",
    "esbuild": "^0.21.3",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.2.3",
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.14",
    "tailwindcss": "^3.4.3",
    "tsx": "^4.10.5",
    "typescript": "^5.4.5"
  },
  "ct3aMetadata": {
    "initVersion": "7.33.1"
  },
  "packageManager": "pnpm@9.1.1"
}

tsconfig.json

{
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,

    /* Bundled projects */
    "lib": ["dom", "dom.iterable", "ES2022"],
    "noEmit": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "plugins": [{ "name": "next" }],
    "incremental": true,

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"],
      "@/*": ["./src/*"]
    }
  },
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "amplify/**/*", ".amplify/**/*", ".api/**/*"]
}

kekami commented 4 months ago

Schema types should be accessed like this:


const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]);

crafael23 commented 4 months ago

Schema types should be accessed like this:
const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]);

That makes sense, how come the "example" shown from the other repository does not require it?

kekami commented 4 months ago

Schema types should be accessed like this:
const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]);
That makes sense, how come the "example" shown from the other repository does not require it?

The example is a bit old, the type syntax has changed since then.

chrisbonifacio commented 4 months ago

Hi @crafael23 thanks for raising this issue. @kekami is right, the syntax in the repo is outdated.

The Schema["Todo"]["type"] is the correct way to access the types for models.

I raised a PR to update the repo.

I'll close this issue as it is expected behavior on the latest package versions.

crafael23 commented 4 months ago

Hi @crafael23 thanks for raising this issue. @kekami is right, the syntax in the repo is outdated.

The Schema["Todo"]["type"] is the correct way to access the types for models.

I raised a PR to update the repo.

I'll close this issue as it is expected behavior on the latest package versions.

Hi, thank you for clarifying, u too @kekami. That pretty much did it.

aws-amplify / amplify-js