Блог

У меня есть страница с расписаниями и соответствующими компонентами.
Вот моя структура компонентов одного файла:

 ├─ ScheduleList
├─── ScheduleItem
└────── SubSchedule
 

Я получаю массив расписаний из API с помощью $apollo: примерно так:

 export default {
  ...
  apollo: {
    scheduleItems: {
      query: ALL_SCHEDULE_ITEMS
       ...
}  
 

Модель данных графиков выглядит следующим образом

 ScheduleItem {
  id: Int
  orderNumber: Int
  subSchedules: SubSchedule[]
  ...
}

SubScheduleItem {
    id: Int
    orderNumberInSchedule: Int
    schedule_id: Int // parent id
    duration: Int // in seconds
    ...
}
 

Я хочу добавить вычисляемое свойство start_time к объекту ответа apollo каждого subSchedule и соответственно schedule . Другими словами: я хочу добавить вычисляемое свойство на уровне API интерфейсного приложения.

Ожидаемый ответ с вычисленной опорой:

 [
  {
    id: 1,
    orderNumber: 1,
    subSchedules: [ { ..., duration: 100, ... } ],
    start_time: 0
  },
  {
    id: 2,
    orderNumber: 2,
    subSchedules: [ { ..., duration: 200, ... } ],
    start_time: 100
  }
]
 

Давайте теперь абстрагируемся от формата времени и представим, что:

• Время начала первого subSchedule -это 0 .
• время всегда выражается в секундах, где 0 первая секунда дня/события/и т.д.

Как я мог заставить его работать?

Я делал это раньше с вычисляемыми геттерами в Vuex ORM, когда работал с API REST, но apollo предлагает избегать использования Vuex, потому что apollo-это замена управления состоянием приложения.

Я использую Vue 2 с JavaScript.