在嵌套属性上使用 useResult 选择 graphql 数据

Posted 2023-03-08

【中文标题】在嵌套属性上使用 useResult 选择 graphql 数据

【英文标题】：Select graphql data with useResult on nested properties

【发布时间】：2021-03-13 10:09:51

【问题描述】：

我们有一个这样执行的 graphql 查询：

// rosterDispatchGroup.query.graphql
query rosterDispatchGroup($fromDate: DateTime!) 
  rosterDispatchGroup(fromDate: $fromDate) 
    ... on ApiError 
      message
    
    ... on RosterDispatchGroupArray 
      data 
        date
        dispatchGroup
      
    
  

并返回数据array（或ApiError 的情况下的消息）：

  "data": 
    "rosterDispatchGroup": 
      "data": [
        
          "date": "2020-10-28",
          "dispatchGroup": [ "A" ]
        
    ]

要在 Vue 模板中使用这些数据，我们这样做：

import  useResult  from '@vue/apollo-composable'
import  defineComponent  from '@vue/composition-api'
import  useRosterDispatchGroupQuery  from 'src/graphql/generated/operations'

export default defineComponent(
  setup() 
    const  result, loading, error  = useRosterDispatchGroupQuery(
      () =>  return  fromDate: new Date()  ,
    )

    const dispatchGroups = useResult( result, [],
      (data) => data.rosterDispatchGroup.data // property data does not exist on type
    )
    return  dispatchGroups, loading, error 
  ,
)

此代码运行良好，但我们收到以下打字稿错误消息：

nitpick the result 和 useResult 的正确方法是什么并避免打字稿错误？我们使用graphql-codegen 生成所需的打字稿代码，并使用this tutorial 获得灵感。

【参考方案1】：

想通了。我们只需要在返回对象数据'array'之前检查__typename属性：

export default defineComponent(
  setup() 
    const dispatchGroups = useResult(result, [], (data) => 
      if (data.rosterDispatchGroup.__typename === 'RosterDispatchGroupArray') 
        return data.rosterDispatchGroup.data
      
    )

    const apiError = useResult(result, null, (data) => 
      if (data.rosterDispatchGroup.__typename === 'ApiError') 
        return data.rosterDispatchGroup
      
    )