对于本文的目标读者

Web(React,Vueなど)でAmplify利用し、自動生成されるクエリでは足りなくなった

總結

graphqlconfig.ymlのincludesに指定しているディレクトリにファイルを作成する

解释

我会以默认生成的模式为基础进行解释。

type Blog @model {
  id: ID!
  name: String!
  posts: [Post] @hasMany
}

type Post @model {
  id: ID!
  title: String!
  blog: Blog @belongsTo
  comments: [Comment] @hasMany
}

type Comment @model {
  id: ID!
  post: Post @belongsTo
  content: String!
}

例として、ブログに投稿されている記事のコメントを取得したい場合

export const getBlogDetail = /* GraphQL */ `
  query GetBlogDetail($id: ID!) {
    getBlog(id: $id) {
      id
      name
      posts {
        items {
          id
          title
          createdAt
          updatedAt
          blogPostsId
          comments {
            items {
              id
              contents
            }
            nextToken
          }
        }
        nextToken
      }
      createdAt
      updatedAt
    }
  }
`;

生成された型情報

请留意

amplify codegenした際に型生成される対象となるのは、

projects:
  [project]:
    schemaPath: amplify/backend/api/[project]/build/schema.graphql
    includes:
      - src/graphql/**/*.js
    excludes:
      - ./amplify/**
    extensions:
      amplify:
        codeGenTarget: typescript
        generatedFileName: src/API.ts
        docsFilePath: src/graphql
extensions:
  amplify:
    version: 3

请注意，这是指定文件的includes部分。
如果将扩展名更改为ts等，将不会生成任何类型，请注意。