关于父母/子女关系和组成部分的问题 [英] Question about parent/child relationships and components

问题描述

我目前正在尝试将项目从vuex/REST移植到vue-apollo.该项目显示了一个事件列表，每个事件都可以扩展以显示详细信息，包括与会者.

I'm currently trying to port a project from vuex/REST to vue-apollo. The project shows a list of events, and each event can be expanded to show details, including attendees.

所以我有一个 EventList 组件，该组件可获取事件和列表所需的所有属性.我有一个 EventDetails 子组件，该组件从onclick列表中展开. EventDetails 需要一些事件数据以及要呈现的与会者列表.问题是，我找不到一种构建查询的优雅方法.

So I'm having an EventList component, that fetches the events and all attributes necessary for the list. And I have a EventDetails child component that is expanded from the list onclick. EventDetails requires some event data as well as the list of attendees to render. Problem is, I cannot find an elegant way to build the queries.

当前，我有一个事件查询，由 EventList 组件执行:

Currently, I have one query for events, that is executed by the EventList component:

query Events($type: [String!]) {
  events(type: $type) {
    id
    name
    attendeeCount
  }
}

在 EventList 组件内部，我将事件ID传递给 EventDetails 子组件，该子组件随后向API查询参与者:

Inside the EventList component, I'm passing the event ID to the EventDetails child component, which then in turn queries the API for attendees:

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 的查询，我无法将已经获取的事件作为prop传递，因此必须再次获取事件数据.另外，展开 EventDetails 面板(等待查询执行)后，无法立即呈现事件详细信息.

The problem with this approach is, with the query named event, that I cannot pass in the already fetched event as a prop, so that event data has to be fetched again. Also, event details cannot be rendered immediately after expanding the EventDetails panel (waiting for query execution).

有没有一种方法可以通过GraphQL传递事件数据(不仅是ID)并仅查询参与者?我发现的唯一可能的解决方案是向GraphQL服务器添加另一个查询与会者，这是我要避免的，因为与会者总是分组在一个事件下，并且我们总是知道父事件对象.

So is there a way to pass in the event data (not just the id) and query just the attendees via GraphQL? The only possible solution I've found is adding another query attendees to the GraphQL server, which I'd like to avoid, because attendees are always grouped under an event and we always know the parent event object.

但这在GraphQL领域被认为是好的架构吗?即使总是知道父对象并通过父对象进行查询，也可以为您要处理的每种对象类型添加查询类型?

But is this considered good architecture in GraphQL land? Add a query type for each an every object type you're dealing with, even if always know the parent and querying via the parent works?

很可能我在这里尝试做一些愚蠢的事情，但对于GraphQL架构我还是很陌生.

It's well possible that I'm trying to do something stupid here, I'm still pretty new to GraphQL architectures.

非常感谢您的帮助.

推荐答案

那么有没有一种方法可以通过GraphQL传递事件数据(不仅是ID)并仅查询与会者?

So is there a way to pass in the event data (not just the id) and query just the attendees via GraphQL?

否，在父查询中询问"一次需要在列表/详细信息视图中找到哪些部分(例如，与会者姓名).父查询的每个扩展-请求超集都会发出一个新请求，而不使用已从缓存中获取的数据.要求更多的保存请求.

No, 'ask' in parent query for parts needed at once in list/details view (f.e. attendees names). Every extension of parent query - asking for superset makes a new request, not using already fetched data (from cache). Ask for more ealier to save requests.

我发现的唯一可能的解决方案是将另一个查询参与者添加到GraphQL服务器，我想避免这种情况，因为参与者总是被分组在一个事件下，并且我们总是知道父事件对象.

The only possible solution I've found is adding another query attendees to the GraphQL server, which I'd like to avoid, because attendees are always grouped under an event and we always know the parent event object.

在反应(我不使用vue)中，您可以从父组件传递数据作为道具-无需将这些数据混合到查询请求中.

In react (I don't use vue) you can pass data as props from parent component - no need to mix this data into query request.

您可以使用与会者上的简单过滤器直接请求与会者不是"(不是通过事件)，例如与会者(eventID:'some id'){.... -当然是由与会者解析器

You can ask for attendees 'directly' (not by event) using simple filter on attendees, f.e. attendees (eventID:'some id') {.... - of course realized by attendees resolver

这篇关于关于父母/子女关系和组成部分的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！