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

【问题标题】：Select graphql data with useResult on nested properties在嵌套属性上使用 useResult 选择 graphql 数据
【发布时间】：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 获得灵感。

【问题讨论】：

标签： typescript vue.js graphql apollo-client vue-composition-api

【解决方案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
      }
    })

【讨论】：