Best practice for accessing parent query object from child components - apollo-client

Question

I have a "event" page that runs an Apollo query for an event with a given ID. There are multiple child components that use the event object to access various properties. I am struggling to find the best pattern for making that object available to the child components. Do I want to have additional queries in the child components that just access the cache exclusively? Or is there a way to have the components defer until the query is complete.

Answer 1

In general, I only run queries from "page" components and pass data down as props to lower level components:
So I would do something like
/pages/EventPage.vue
<template>
<div>
<EventDetails :event="event">
</div>
</template>
<script>
import EventDetails from '/wherever/my/component/is/EventDetails.vue'
import MY_EVENT_QUERY from '/wherever/my/query/is/EventQuery.gql'
export default {
apollo: {
event: {
query: MY_EVENT_QUERY
}
}
}
</script>
/components/EventDetails.vue
<template>
<div>
{{event.name}}
</div>
</template>
<script>
export default {
props: {
event: {
type: Object,
default: { name: '' }
}
}
}
</script>
There might be rare times where I would have a sub-component fetch its own data. I'm thinking of a form where you have select box that needs to load the list of dropdown items or something. But I would not re-query the same event item over and over again.