Question

我目前正在尝试将项目从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的查询，我无法将已经获取的事件作为prop传递，因此必须再次获取事件数据。此外，展开EventDetails面板（等待查询执行）后，无法立即呈现事件详细信息。

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

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

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

非常感谢您的帮助。

Answer 1

有没有办法通过GraphQL传递事件数据（不仅是ID）并仅查询参与者？

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

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

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

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

有关父母/子女关系和组成部分的问题

1 个答案: