Reactjs 如何在React中设置AWS amplify GraphQL响应的typescript类型？

我在typescript中有一个react组件，我想将appsync graphql查询的结果设置为状态为的属性

import React, { Component } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import {ListProjectsQuery} from './API'
import {listProjects } from './graphql/queries';

class App extends Component<{}, {
  projects:ListProjectsQuery
}>  {
  state = {
    projects: null
  };
  async componentDidMount() {
    const projects = await API.graphql(graphqlOperation(listProjects));
    this.setState({ projects });
  }

  ...

这使得属性类型“项目”不兼容。

我要么被告知类型“Observable”上不存在

属性，要么被告知默认状态值的形状不兼容

最后，我尝试使用我发现的示例中的界面：

interface IListProjectQuery {
  projects: ListProjectsQuery;
}

然后我引用接口

class App extends Component<
  {},
  {
    projects: IListProjectQuery;
  }
> 

将您的属性设置为可选：

class App extends Component<{}, {
  projects?: ListProjectsQuery //<<== note the question mark
}>  {
  state = {
    projects: null
  };
  async componentDidMount() {
    const projects = await API.graphql(graphqlOperation(listProjects));
    this.setState({ projects });
  }

class应用程序扩展组件

您必须定义一个类型，该类型与希望从amplify获得的数据结构相匹配
第二步是将响应数据转换为您定义的类型，就是这样
州内的项目属性应正确键入，projects:IProject[]|未定义。您要么有一个项目数组，要么它是未定义的


导出类型i项目={
名称：string
}
导出类型GetProjectsQuery={
清单项目：{
项目：IProject[]
下一步：字符串
}
}
const fetchAllProjects=async（）=>{
试一试{
const result=（等待API.graphql（graphqlOperation（querys.listProjects））作为{
数据：GetProjectsQuery
}
projects=result.data.listProjects.items
}捕获（错误）{
//在这里处理错误
}
谢谢。不幸的是，这没有帮助。它抛出类型“App”中的
属性“state”不可分配给基类型“Component”中的相同属性。
因此在组件状态中将null切换为未定义，然后返回抛出属性“projects”的类型不兼容。
后者的完整错误日志is:“``类型错误：类型为“{projects:GraphQLResult | Observable；}”的参数不能分配给类型为“{projects？：ListProjectsQuery | undefined；}|”（prevState:Readonly，props:Readonly）=>{projects？：ListProjectsQuery | undefined；}Pick | null）| Pick | null.类型为“{projects:GraphQLResult | Observable；}'不可分配给类型'Pick'。``继续…``属性类型'projects'不兼容。类型'GraphQLResult | Observable'不可分配给类型'ListProjectsQuery | undefined'。属性'listProjects'在类型'GraphQLResult'中缺失，但在类型'ListProjectsQuery'中是必需的。TS2345``您可以强制转换类型'像constprojects=await API.graphql（graphqlooperation（listProjects））这样手动计算结果的pe作为ListProjectsQuery；或。您必须向结果中添加另一个类型，因为可能的话，查询不会解析，然后该类型将不是ListProjectsQuery类型，而是未定义的类型，或者例如错误类型。遗憾的是，我也遇到了这个问题。我认为答案可能是不使用
异步/等待
。然后您应该能够更容易输入，对吗？我想我会直接做出回应。。
export type ListProjectsQuery = {
  listProjects:  {
    __typename: "ModelProjectConnection",
    items:  Array< {
      __typename: "Project",
      id: string,
      name: string,
      organisation:  {
        __typename: "Organisation",
        id: string,
        name: string,
      } | null,
      list:  {
        __typename: "ModelListConnection",
        nextToken: string | null,
      } | null,
    } | null > | null,
    nextToken: string | null,
  } | null,
};

class App extends Component<{}, {
  projects?: ListProjectsQuery //<<== note the question mark
}>  {
  state = {
    projects: null
  };
  async componentDidMount() {
    const projects = await API.graphql(graphqlOperation(listProjects));
    this.setState({ projects });
  }