关于父/子关系和组件的问题 [英] 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 组件，它获取列表所需的事件和所有属性.我有一个从 onclick 列表中展开的 EventDetails 子组件.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 服务器添加另一个查询 attendees，我想避免这种情况，因为参与者总是被分组在一个事件下，我们总是知道父事件对象.

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.

在 react(我不使用 vue)中，您可以将数据作为来自父组件的 props 传递 - 无需将此数据混合到查询请求中.

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.

您可以使用 attendees 上的简单过滤器直接"(而不是通过 event)请求 attendees，例如attendees (eventID:'some id') {.... - 当然由 attendees 解析器实现

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屋！