В настоящее время я пытаюсь перенести проект из vuex / REST в vue-apollo.Проект показывает список событий, и каждое событие может быть расширено, чтобы показать детали, включая участников.
Итак, у меня есть компонент EventList, который выбирает события и все атрибуты, необходимые для списка.И у меня есть EventDetails дочерний компонент, который раскрывается из списка по щелчку.EventDetails требует некоторые данные о событиях, а также список участников для рендеринга.Проблема в том, что я не могу найти элегантный способ построения запросов.
В настоящее время у меня есть один запрос для событий, который выполняется компонентом EventList:
query Events($type: [String!]) {
events(type: $type) {
id
name
attendeeCount
}
}
ВнутриEventList компонент, я передаю идентификатор события дочернему компоненту 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?Единственное возможное решение, которое я нашел, это добавление еще одного запроса attendees на сервер GraphQL, которого я хотел бы избежать, потому что участники всегда группируются по событию, и мы всегда знаем родительский объект события.
Но считается ли это хорошей архитектурой на земле GraphQL?Добавить тип запроса для каждого типа объекта, с которым вы имеете дело, даже если всегда знаете родителя и работает с помощью родительского запроса?
Вполне возможно, что я пытаюсь сделать что-то глупое, яЯ все еще довольно новичок в архитектуре GraphQL.
Ваша помощь очень важна.