1

我目前正在尝试将一个项目从 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 架构还是很陌生。

非常感谢您的帮助。

4

1 回答 1

1

那么有没有办法通过 GraphQL 传入事件数据（不仅仅是 id）并仅查询与会者？

不，在父查询中“询问”列表/详细信息视图中需要的部件（参加者姓名）。父查询的每个扩展 - 请求超集都会发出一个新请求，而不是使用已经获取的数据（从缓存中）。要求更早地保存请求。

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

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

您可以使用简单的过滤器attendees“直接”（而不是通过）请求，fe - 当然由解析器实现eventattendeesattendees (eventID:'some id') {....attendees

于 2019-06-17T10:07:14.550 回答