Question about parent/child relationships and components

问题

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.

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.

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

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

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
    }
  }
}

The parent component (simplified):

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

The child component (simplified):

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)
      }
    }
  }
}

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).

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.

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?

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

Your help is greatly appreciated.

回答1:

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.

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.

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.

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

来源：https://stackoverflow.com/questions/56628524/question-about-parent-child-relationships-and-components