使用 Hasura 中的 node() 中继端点和代码生成的 Vue Apollo 客户端

问题描述

我正在尝试弄清楚如何使用 Hasura 的 node() Relay 端点，但要使用 vue apollo 客户端和 typescript-vue-apollo 代码生成插件。通过查询从用户表中获取用户，我这样查询：

query getUser($uid: ID!) {
  node(id: $uid) {
    ... on user {
      ...userInfo
    }
  }
}

fragment userInfo on user {
  id
  name
}

但我的问题是 codegen 为 node() 端点生成的类型包括我在 Hasura 中的所有其他表，这使得 Typescript 认为结果可能是我的任何其他表，而不仅仅是用户表。这使得当我尝试访问 name 上的 user 时，Typescript 会抱怨我的其他表之一没有 name 列：

Property 'name' does not exist on type 'Readonly<{ __typename?: "some_other_table_name" | undefined; }>'.

这是 codegen 生成的类型：

export type GetUserQuery = (
  { __typename?: 'query_root' }
  & { node?: Maybe<{ __typename?: 'comment' } | { __typename?: 'device_token' } | { __typename?: 'goal' } | { __typename?: 'hashtag' } | { __typename?: 'notification' } | { __typename?: 'point' } | { __typename?: 'post' } | { __typename?: 'quote' } | (
    { __typename?: 'user' }
    & UserInfoFragment
  )> }
);

以下是我目前解决这个问题的方法：

import { useResult } from '@vue/apollo-composable';
import { useGetUserQuery,UserInfoFragment } from 'generated/graphql';

const { result } = useGetUserQuery({
  uid: userId
});

const user = useResult(result,null,data => data.node) as unknown as UserInfoFragment;

但是必须有更好的方法来实现这一点，所以我的问题是：有没有办法让代码生成器知道 ... on user 只在 user 表上？或者在 vue apollo 客户端中使用 Hasura 的 node() 端点的其他技巧？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）