通过 React 中的 Amplify 创建对 AWS AppSync 的动态 GraphQL 查询

Question

我正在使用 AWS Appsync 作为后端在 React 中编写应用程序，并使用 AWS Amplify 引导它。

用例是根据当前经过身份验证的用户组 ID 从 DynamoDB 表中检索汽车列表。架构如下所示：

type Query {
    carsByUserGroup(userGroup: String!, limit: Int, nextToken: String): CarConnection
        @aws_cognito_user_pools
}

type CarConnection {
    items: [Car]
    nextToken: String
}

type Car {
    timestamp: String
    regno: String!
    country: String!
    type: String
    attributes: CarAttributes
    links: [Link]
    basic: BasicInfo
    inspection: InspectionInfo
    status: StatusInfo
    technical: TechnicalInfo
    uploadedBy: String
    userGroup: String
}

注意：“Car”类型中的一些字段与其他类型相关，这些字段在模式中定义，但我没有在此处添加，以节省空间。

下载新模式并将其放入 React 应用程序中的 schema.graphql 后，我运行“amplify codegen”以生成新查询。这是我在“queries.ts”中得到的：

query CarsByUserGroup($userGroup: String!, $limit: Int, $nextToken: String) {
  carsByUserGroup(userGroup: $userGroup, limit: $limit, nextToken: $nextToken) {
    items {
      timestamp
      regno
      country
      type
      uploadedBy
      userGroup
      __typename
    }
    nextToken
    __typename
  }
}

这是发生两个问题的地方：

1. 它在“items”字段中生成“Car”中的一些属性，但由于某种原因而不是全部属性？有人能解释一下这是为什么吗？

2. 当我想在我的 React 应用程序中使用查询时，我通过此函数来完成：

export const fetchCarsByGroup = async (userGroup: string, limit = 10) => {
    try {
        const data = await client.graphql({
            query: queries.carsByUserGroup,
            variables: {
                userGroup: userGroup,
                limit: limit,
            }
        })
        console.log('Fetched cars:', data);
        // Handle the fetched data
    } catch (error) {
        console.error('Error fetching cars:', error);
        // Handle error
    }
};

“fetchCarsByGroup”返回的是一个与“userGroup”匹配的数组，字段在query.ts中的“CarsByUserGroup”中列出。然而，我对 GraphQL 及其为何如此强大的理解是，根据用例，我可以定义在特定用例上返回哪些特定字段。这里好像不是这样的？

我假设在函数“fetchCarsByGroup”中，我可以定义要在“变量”字段中返回的字段，就像我在 AppSync 中的 AWS 管理控制台中的“查询”下一样。

我读到的一个解决方案是创建一个“custom-queries.ts”文件并添加针对特定用例的查询。

如果我这样做并定义要返回的特定字段，那么下次我在模式中编辑某些内容后运行“amplify codegen”时，“custom-queries.ts”中的自定义查询将不会同步到我的 Amplify 设置。因此，如果我从“汽车”中删除一个字段，我必须在获取这些字段的所有自定义查询中手动执行此操作。

看到该应用程序可以扩展功能，这对我来说是一个危险信号。

所以我问你的问题是，我误解了什么，在定义“fetchCarsByGroup”中返回哪些特定字段并将“CarsByUserGroup”作为我可以从中挑选的全局查询方面，我的假设是否错误？

Answer 1

不要相信 codegen 会为您生成查询。它不知道你真正想要客户端什么。

您可以修改查询：

query CarsByUserGroup($userGroup: String!, $limit: Int, $nextToken: String) {
  carsByUserGroup(userGroup: $userGroup, limit: $limit, nextToken: $nextToken) {
    items {
      timestamp
      regno
      country
      type
      uploadedBy
      userGroup
    }
    nextToken
  }
}

根据客户需求包含或排除字段。例如：

query CarsByUserGroup($userGroup: String!, $limit: Int, $nextToken: String) {
  carsByUserGroup(userGroup: $userGroup, limit: $limit, nextToken: $nextToken) {
    items {
      regno
      country
      type
      links {
        linkfield1
        linkfield2
        etc…
      }
      userGroup
    }
    nextToken
  }
}

同样有效。

GraphQL variables 是顶部以

$

为前缀的变量。这些可以在运行时传入。字段选择是在查询定义本身中完成的。如果您愿意，您可以动态构建查询定义，它们不需要是静态的。