Angular AWS Amplify Graphql查询没有使用API服务返回预期的数据

Question

我很难使用AWS Amplify Graphql API查询我需要的数据。

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

这是我在AppSync控制台创建的查询，我想从我的Angular应用中使用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
}
}
}
}
}
}

上述查询的结果返回我正在寻找的内容:

"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": []
}
}
}
]
}
}

下面是我在Angular应用中使用API服务进行的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。

寻找一些指导的事情，我可以尝试。有人能给我指个正确的方向吗?

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。

Answer 2

我可以通过在图形模式中创建一个新模型来做我需要做的事情。

我是这样做的:

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"])
}