“响应”类型上不存在属性“数据”

Question

我已将这种方法用于 GraphQL 突变并且它有效，但我遇到了 Graphql 查询问题。

 export default interface LoadUsersResponse {
    users: {
        nodes:{
            id: Number;
            firstName: String;
            lastName: String;
            email: String;
            phoneNumber: String;
          }
          totalCount: Number;
    };
  }

const [loadUsers, { loading, data }] = useLazyQuery<LoadUsersResponse>(LoadUsersQuery);

我这样运行查询：

<Button onClick={() => ShowUsers()}>
          {' '}
          Search
        </Button>
        <br></br>
        <PrintUsers data={data} />

function PrintUsers({ data }: LoadUsersResponse) {
    return (
      <div>
        {data &&
          data.users.nodes &&
          data.users.nodes.map((c: any, i: any) => (
            <li key={i}>
              Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
              Email: {c.email}, phoneNumber: {c.phoneNumber}
            </li>
          ))}
      </div>
    );
  }

我在data的第一行收到一个错误：

Property 'data' does not exist on type 'LoadUsersResponse'.ts(2339)

虽然它工作正常如果我完全删除 UserResponse 类型并只写anyhere。

如果我删除解构并继续使用 LoadUserResponse，我会在 PrintUsers 中的单词映射上收到错误

Property 'map' does not exist on type '{ id: Number; firstName: String; lastName: String; email: String; phoneNumber: String; }'.ts(2339)

这里是<PrintUsers data={data} /> 我在第一个datathat 上收到错误

Type '{ data: LoadUsersResponse | undefined; }' is not assignable to type 'IntrinsicAttributes & LoadUsersResponse'.
  Property 'data' does not exist on type 'IntrinsicAttributes & LoadUsersResponse'.ts(2322)

Answer 1

键入({ data }: LoadUsersResponse) 时，您正在解构初始化程序中的对象。将其替换为 ( data: LoadUsersResponse) 应该可以解决您的（第一个）问题。我无法回答为什么它与any 一起编译...

然后您尝试map 和Object，这是不可行的。也许这就是您想要实现的目标：

interface NodeProps {
  id: Number;
  firstName: String;
  lastName: String;
  email: String;
  phoneNumber: String;
}

export default interface LoadUsersResponse {
  users: {
    nodes: NodeProps[];
    totalCount: Number;
  };
}

function PrintUsers(data: LoadUsersResponse) {
  return (
    <div>
      {data &&
        data.users.nodes &&
        data.users.nodes.map((c: any, i: any) => (
          <li key={i}>
            Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
            Email: {c.email}, phoneNumber: {c.phoneNumber}
          </li>
        ))}
    </div>
  );
}

一些额外的想法，没有理由检查未定义的data &&，因为您明确期望它。它会一直在那里。而且最好在JS String之上使用文字string。