Объединение данных из разных резолверов graphql на стороне клиента vue.js для простого вывода

Я запрашиваю автомобили из api с помощью одного запроса, но с двумя преобразователями (листинг и листинг) (надеюсь, resolver - правильное имя для него). Один автомобиль я получаю по идентификатору через объявление, а другие автомобили я получаю без фильтров по объявлениям. Резолверы выводят данные в немного другой структуре на стороне сервера, но я получаю одни и те же поля только в разных «местах». Я хочу объединить структуру, чтобы получить единый массив, который я могу просто перебрать в vue.js. Для апикалов я использую vue-apollo.

Не удалось найти информацию для слияния данных на стороне клиента внутри graphqlqueries. Все, что я нашел, это обработка его на стороне сервера с помощью резолверов, но это api, которым я не владею.

Возможно ли это с помощью graphql или мне нужно объединить его в свой vuecomponent, и если да, то как лучше всего это сделать?

Результатом будет сетка автомобилей, в которой я покажу машину недели (запрошенную id) вместе с новейшими автомобилями соответствующего автосалона.

Полный снимок экрана с ответом: https://i.imgur.com/gkCZczY.png

Урезанный пример с указанием только идентификатора, чтобы показать проблему:

query CarTeaser ($guid: String! $withVehicleDetails: Boolean!) {
    search {
        listing(guid: $guid){
            details{
                identifier{
                    id #for example: here I get the id under details->identifier 
                }
            }
        }
        listings( metadata: { size: 2 sort:{ field: Age order: Asc}}) {
            listings{
                id #here it's right under listings 
                details{
                    …
                    }
                }
            }
        }
    }
}

graphql vuejs2 apollo graphql-js vue-apollo
person haeki    schedule 13.07.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В идеале вы правы, это должно обрабатываться на стороне сервера, но если это не ваш API, единственное решение - манипулировать данными на стороне клиента, то есть в вашем компоненте.

Вероятно, намного проще оставить массив listings нетронутым и просто объединить с ним элемент listing, например так:

// assuming 'search' holds the entire data queried from the api
const fullListing = [
   // car of the week, data reformatted to have an identical structure as
   // the 'other' cars
   {
     id: search.listing.details.identifier.id,
     details: {
       vehicle: search.listing.details.vehicle,
     },
   }, 
   ...search.listings.listings, // the 'other' cars
]
person Thomas Hennes    schedule 16.07.2019