时间戳

首页 > 解决方案 > TypeScript 查询属性不存在

typescript - TypeScript 查询属性不存在

问题描述

我尝试使用 TypeScript 在 GraphQL 查询中添加查询类型，但我不明白为什么 TS 会返回此错误：

Property 'userMe' does not exist on type 'Query | null'.

我的查询：

const { userMe }: Query | null = cache.readQuery({
  query: ME,
});

我的类型：

export type Query = {
  __typename?: 'Query';
  files?: Maybe<Array<Maybe<UploadFile>>>;
  me?: Maybe<UsersPermissionsMe>;
  userMe?: Maybe<CustomUsersPermissionsMe>;
};

userMe存在，但不是必需的。我不明白为什么 TS 会为此哭泣：DI 使用 TS v3.7.5。

任何人都可以帮助我吗？

标签： typescriptgraphql

解决方案

cache.readQuery()这是因为可能的返回值是null. 它的返回类型是Query | null错误消息的外观。如果它为空，您的代码将引发异常。

代替：

const { userMe }: Query | null = cache.readQuery({
  query: ME,
});

你需要做：

const query = cache.readQuery({
  query: ME,
});
const userMe = query && query.userMe ? query.userMe: undefined

您需要处理查询结果可能为空的事实，并且userMe可能undefined在非空查询上。

null在高层次上，TypeScript 迫使您编写代码来处理事物可能存在或undefined在运行时的事实。您的类型签名模拟了可能出现这种情况的两种情况（空查询结果和非空查询上的未定义字段）。

您如何在代码中处理它取决于您的程序在这种情况下的行为方式。

至少您可以执行以下操作：

if (userMe !=== undefined) {
  // TS now knows that in here userMe is Maybe<CustomUsersPermissionsMe>
}

你必须防止 undefined 因为它在Query对象本身上是可以为空的。然后它是一个Maybe，所以你有一堆守卫要写。

推荐阅读