在 vue.js 客户端合并来自不同 graphql 解析器的数据以进行简单输出

Posted 2023-03-10

【中文标题】在 vue.js 客户端合并来自不同 graphql 解析器的数据以进行简单输出

【英文标题】：Merging data from different graphql resolvers in vue.js client side for simple outputting

【发布时间】：2019-11-22 23:32:46

【问题描述】：

我确实使用单个查询但两个解析器（列表和列表）从 api 查询汽车（希望解析器是它的正确名称）。我通过列表获得的一辆车和我通过列表获得的其他没有过滤器的汽车。解析器在服务器端输出的数据结构略有不同，但我确实在不同的“地方”得到了相同的字段。我想合并结构以获得一个数组，我可以简单地在 vue.js 中循环。对于 apicalls，我确实使用 vue-apollo。

找不到任何信息来在 graphqlqueries 中合并数据客户端。我发现的只是用解析器在服务器端处理它，但它是一个我不拥有的 api。

是否可以使用 graphql 或者我必须将其合并到我的 vuecomponent 中，如果可以，最好的方法是什么？

输出将是一个汽车网格，我在其中显示了本周的汽车（由 id 请求）以及相关卡片经销商的最新汽车。

完整截图，包括回复：https://i.imgur.com/gkCZczY.png

仅用 id 简化示例以显示问题：

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
                    …
                    
                
            
        
    

【参考方案1】：

理想情况下你是对的，它应该在服务器端处理，但如果它不是你的 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
]