我目前正在尝试将一个项目从 vuex/REST 移植到 vue-apollo。该项目显示了一个事件列表，每个事件都可以展开以显示详细信息，包括与会者。
所以我有一个EventList组件，它获取列表所需的事件和所有属性。我有一个EventDetails从列表 onclick 扩展的子组件。EventDetails需要一些事件数据以及要呈现的与会者列表。问题是，我找不到构建查询的优雅方法。
目前，我有一个由EventList组件执行的事件查询：
query Events($type: [String!]) {
events(type: $type) {
id
name
attendeeCount
}
}
在EventList组件内部，我将事件 ID 传递给EventDetails子组件，然后子组件依次查询 API 中的参与者：
query Event($id: ID!) {
event(id: $id) {
id
name
attendeeCount
attendees {
id
name
paymentState
}
}
}
父组件（简化）：
<template>
<EventDetails v-for="event in events" :eventId="event.id" />
</template>
<script lang="ts">
import …
@Component({
apollo: {
events: { … }
},
components: {
EventsDetails
}
})
export default class EventList extends Vue {
events: Event[] = []
}
</script>
子组件（简化）：
export default class EventDetails extends Vue {
@Prop(Number) eventId!: ID
// I'd like to pass in the complete event object here, and just
// fetch another attribute "attendees" via graphql, like this:
@Prop(Object) event!: Event
apollo: {
// Passing in the event as prop conflicts with this.
// How can I fetch more attributes for a passed in object?
// Is this even possible? Do I have to fetch everything again?
// Is it possible with vue-apollo to just fetch the attendees
// and return them as property "attendees" in the EventDetails
// component?
event: {
query: gql`
query Event($id: ID!) {
event(id: $id) {
...event
attendees {
id
aasmState
event {
id
attendeeSelectionClosed
}
ticket {
id
companyName
position
}
}
}
}
${eventFragment}
`,
variables() {
return { id: this.eventId }
},
error(error) {
console.log(error)
}
}
}
}
这种方法的问题是，对于名为 的查询event，我无法将已获取的事件作为道具传递，因此必须再次获取事件数据。此外，展开面板后无法立即呈现事件详细信息EventDetails（等待查询执行）。
那么有没有办法通过 GraphQL 传入事件数据（不仅仅是 id）并仅查询与会者？我找到的唯一可能的解决方案是向attendeesGraphQL 服务器添加另一个查询，我想避免这样做，因为与会者总是分组在一个事件下，我们总是知道父事件对象。
但这在 GraphQL 领域被认为是好的架构吗？为您正在处理的每个对象类型添加一个查询类型，即使总是知道父对象并通过父对象进行查询？
我很可能在这里尝试做一些愚蠢的事情，我对 GraphQL 架构还是很陌生。
非常感谢您的帮助。