[英]Grabbing the ID of a linked object with GraphQL, Apollo and React
I'm building an event managing database that handles RSVPs and links those RSVPs to a specific event.我正在构建一个事件管理数据库,用于处理 RSVP 并将这些 RSVP 链接到特定事件。 I'm using React, Apollo, GraphQL and Prisma as my stack and am having trouble correctly writing a mutation that would link an RSVP to an existing event.我正在使用 React、Apollo、GraphQL 和 Prisma 作为我的堆栈,并且无法正确编写将 RSVP 链接到现有事件的突变。 Still relatively new to the syntax, but I can't grab the event.id when I'm using the createRsvp mutation.语法仍然相对较新,但是当我使用 createRsvp 突变时,我无法获取 event.id。
I'm able to pass the event.id down on the front-end through props, and I think a less-elegant way of receiving event.id in the args of the RSVP would be creating a hidden form with the event.id, but I KNOW there's got to be a way through graphQL.我可以通过 props 在前端传递 event.id,我认为在 RSVP 的 args 中接收 event.id 的一种不太优雅的方式是创建一个带有 event.id 的隐藏表单,但我知道必须有一种通过 graphQL 的方法。 I've tried looking through the docs and various examples on grabbing the id from a different object.我已经尝试查看有关从不同对象获取 id 的文档和各种示例。 Any help is much appreciated :)任何帮助深表感谢 :)
On the backend, here's my datamodel:在后端,这是我的数据模型:
type Rsvp {
id: ID! @id
event: Event! @relation(link: INLINE)
firstName: String!
lastName: String!
email: String! @unique
company: String
jobTitle: String
mobile: String
dietary: String
}
type Event {
id: ID! @id
isPublished: Boolean
title: String!
startDate: String!
endDate: String!
description: String!
image: String
address: String
url: String!
suburb: String
postcode: String
state: String
country: String
guestLimit: Int
rsvps: [Rsvp]
}
The actual resolver for the Mutation.. I think I'm incorrectly retrieving the event.id here. Mutation 的实际解析器.. 我想我在这里错误地检索了 event.id。 My though process is that data: {...args} is first taking in the data from the RSVP form, and the connection to event is linking it to a certain event.我的流程是 data: {...args} 首先从 RSVP 表单中获取数据,并且与事件的连接将其链接到某个事件。
async createRsvp(parent, args, ctx, info) {
// 1. Query the event that is being registered for
const eventId = ctx.request.event.id;
// 2. Create the RSVP for this specific event
const rsvp = await ctx.db.mutation.createRsvp(
{
data: {
...args,
event: {
connect: { id: eventId }
}
}
},
info
);
console.log(rsvp);
return rsvp;
}
};
On the front end, this is what my Mutation looks like在前端,这就是我的 Mutation 的样子
const RSVP_MUTATION = gql`
mutation RSVP_MUTATION(
$email: String!
$firstName: String!
$lastName: String!
$company: String
$jobTitle: String
$mobile: String
$dietary: String
) {
createRsvp(
email: $email
firstName: $firstName
lastName: $lastName
company: $company
jobTitle: $jobTitle
mobile: $mobile
dietary: $dietary
) {
id
}
}
`;
and finally, the Mutation function in the form:最后,形式为 Mutation 函数:
<Mutation mutation={RSVP_MUTATION} variables={({ id }, this.state)}>
{(createRsvp, { loading, error }) => (
<Form
onSubmit={async e => {
e.preventDefault();
const res = await createRsvp();
}}>
The error I receive in the console is "Uncaught (in promise) Error: GraphQL error: Cannot read property 'id' of undefined" which leads me to believe I'm incorrectly trying to access the event.id.我在控制台中收到的错误是“未捕获(承诺)错误:GraphQL 错误:无法读取未定义的属性‘id’”,这让我相信我错误地尝试访问 event.id。 Any tips or advice?任何提示或建议? Thanks again!再次感谢!
You can use /graphiql
playground to test queries and mutations (API generally).您可以使用/graphiql
playground 来测试查询和/graphiql
(通常是 API)。
Testing this mutation:测试这个突变:
mutation RSVP_MUTATION(
$email: String!
$firstName: String!
$lastName: String!
$company: String
$jobTitle: String
$mobile: String
$dietary: String
) {
createRsvp(
email: $email
firstName: $firstName
lastName: $lastName
company: $company
jobTitle: $jobTitle
mobile: $mobile
dietary: $dietary
) {
id
}
}
... with required variables you should quickly notice that you need to pass event id as variable, too. ...使用必需的变量,您应该很快注意到您也需要将事件 ID 作为变量传递。 No special (more/less elegant), separate method required, this is a standard, query/mutation and variables, nothing more !!!没有特别的(更多/更少优雅),需要单独的方法,这是一个标准,查询/变异和变量,仅此而已!!!
Just add eventId variable:只需添加 eventId 变量:
mutation RSVP_MUTATION(
$eventId: ID!
$email: String!
$firstName: String!
$lastName: String!
$company: String
$jobTitle: String
$mobile: String
$dietary: String
) {
createRsvp(
eventId: $eventId
email: $email
firstName: $firstName
lastName: $lastName
company: $company
jobTitle: $jobTitle
mobile: $mobile
dietary: $dietary
) {
id
}
}
Of course in resolver you'll get it within args
, you can use fe当然在解析器中你会在args
得到它,你可以使用 fe
const { eventId, ...rest } = args;
const rsvp = await ctx.db.mutation.createRsvp(
{
data: {
...rest,
event: {
React variables can be passed fe by React 变量可以通过 fe 传递
variables={{ eventId: id, ...this.state }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.