Angular AWS放大GraphQl查询未使用API​​服务返回预期数据

Question

我很难使用AWS AMPLIFY GRAPHQL API查询所需的数据。

我设法在AWS AppSync控制台中编写了测试查询，但是我不知道如何使用API​​服务在代码中复制此查询。

查询

query MyQuery {
  listGymnastMeetSessions(filter: {meetSessionID: {eq: "4aea7082-60b8-4268-a816-00661e7a6e4d"}}) {
    items {
      gymnastID
      meetSessionID
      gymnast {
        firstName
        lastName
        meetScores(filter: {meetSessionId: {eq: "4aea7082-60b8-4268-a816-00661e7a6e4d"}}) {
          items {
            balanceBeam
            floor
            unevenBars
            floor
          }
        }
      }
    }
  }
}

我在AppSync控制台中创建的

"data": {
    "listGymnastMeetSessions": {
      "items": [
        {
          "gymnastID": "a4acbcb9-3b42-4a31-8448-d300e57b5b97",
          "meetSessionID": "3aea7082-60b8-4268-a816-00661e7a6e4d",
          "gymnast": {
            "firstName": "Sophia",
            "lastName": "Jones",
            "meetScores": {
              "items": [
                {
                  "balanceBeam": 9.5,
                  "floor": 9.5,
                  "unevenBars": 9.5
                }
              ]
            }
          }
        },
        {
          "gymnastID": "e212e9cf-6620-4b1f-a6b4-f0a820b265da",
          "meetSessionID": "3aea7082-60b8-4268-a816-00661e7a6e4d",
          "gymnast": {
            "firstName": "Olivia",
            "lastName": "Jones",
            "meetScores": {
              "items": [
                {
                  "balanceBeam": 9.15,
                  "floor": 9.05,
                  "unevenBars": 9.25
                }
              ]
            }
          }
        },
        {
          "gymnastID": "d97f5cea-a330-4717-85d7-b21ccc31a871",
          "meetSessionID": "3aea7082-60b8-4268-a816-00661e7a6e4d",
          "gymnast": {
            "firstName": "Emily",
            "lastName": "Jones",
            "meetScores": {
              "items": []
            }
          }
        }
      ]
    }
  }

这是 使用API​​服务：

this.api
    .ListGymnastMeetSessions({
      meetSessionID: { 
        eq: this.id 
      } 
    })
    .then((event) => {
      this.gymnastMeetSessions = event.items as GymnastMeetSessions[];
      console.log('gymnastMeetSessions ', this.gymnastMeetSessions); 
    });

这是API调用返回的内容的示例：

0:
createdAt: "2022-05-16T13:19:06.364Z"
gymnast:
  createdAt: "2022-04-28T17:09:03.758Z"
  dateOfBirth: "2020-03-28"
  firstName: "Sophia"
  gender: "female"
  id: "b4acbcb9-3b42-4a31-8448-d300e57b5b97"
  lastName: "Jones"
  level: "Level 2"
  private: null
  teamId: "f1d61c2a-fbe9-4439-8870-fef776a1d5c9"
  updatedAt: "2022-04-28T17:09:03.758Z"
  __typename: "Gymnast"
  [[Prototype]]: Object
gymnastID: "b4acbcb9-3b42-4a31-8448-d300e57b5b97"
id: "013e5f11-a06a-4bc6-b337-8ea834d5ccd0"
meetSession:
  createdAt: "2022-05-13T20:10:57.081Z"
  division: "Senior"
  id: "3aea7082-60b8-4268-a816-00661e7a6e4d"
  level: "Level 2"
  meetId: "e0911c5c-1ffc-4acf-8b61-5c85016a1e16"
  sessionName: "Session 1"
  startDate: "2022-05-15"
  startTime: "13:00:00.000Z"
  updatedAt: "2022-05-13T20:10:57.081Z"
  __typename: "MeetSession"
  [[Prototype]]: Object
meetSessionID: "3aea7082-60b8-4268-a816-00661e7a6e4d"
updatedAt: "2022-05-16T13:19:06.364Z"
__typename: "GymnastMeetSessions"

您可以查看我的schema.graphql文件在这里a>。

寻找有关我可以尝试的事情的指导。有人可以将我指向正确的方向吗？

Answer 1

您可以编写自己的GraphQl语句，以包括MeetScores信息。假设您的GraphQL模式是正确的，您可以执行类似的操作：

async _loadGymnastMeetSessions(
    filter: ModelGymnastMeetSessionsFilterInput,
    limit: number,
    nextToken: string
  ) {
    const statement = `query MyQuery {
  listGymnastMeetSessions(filter: {meetSessionID: {eq: "4aea7082-60b8-4268-a816-00661e7a6e4d"}}) {
    items {
      gymnastID
      meetSessionID
      gymnast {
        firstName
        lastName
        meetScores(filter: {meetSessionId: {eq: "4aea7082-60b8-4268-a816-00661e7a6e4d"}}) {
          items {
            balanceBeam
            floor
            unevenBars
            floor
          }
        }
      }
    }
  }
}`;
    const gqlAPIServiceArguments: any = {};
    if (filter) {
      gqlAPIServiceArguments.filter = filter;
    }
    if (limit) {
      gqlAPIServiceArguments.limit = limit;
    }
    if (nextToken) {
      gqlAPIServiceArguments.nextToken = nextToken;
    }
    const response = (await API.graphql(
      graphqlOperation(statement, gqlAPIServiceArguments)
    )) as any;
    return <ListGymnastMeetSessionsQuery>response.data.listGymnastMeetSessions;
}

您可以将ID添加到查询中，而是可以使用该方法中的过滤器参数，而GraphQL语句中的$ filter则可以使用$ filter。

Answer 2

我能够通过在GraphQL架构中创建一个新模型来完成所需的工作。

这是我所做的：

    type MeetSessionGymnastScore @model {
      id: ID!
      meetId: ID! @index(name: "byMeet", sortKeyFields: ["id"])
      meet: Meet @belongsTo(fields: ["meetId"])
      meetSessionId: ID! @index(name: "byMeetSession", sortKeyFields: ["id"])
      meetSession: MeetSession @belongsTo(fields: ["meetSessionId"])
      gymnastId: ID! @index(name: "byGymnast", sortKeyFields: ["id"])
      gymnast: Gymnast @belongsTo(fields: ["gymnastId"])
      meetScoreId: ID @index(name: "byMeetScore", sortKeyFields: ["id"])
      meetScore: MeetScore @belongsTo(fields: ["meetScoreId"])
    }