React类组件中如何为AWS Amplify GraphQL响应配置TypeScript类型及默认状态

你遇到的核心问题是state字段的类型定义和初始值不匹配：你的projects字段被定义为必须是ListProjectsQuery类型，但初始值null并不属于这个类型（哪怕ListProjectsQuery内部的属性允许为null，整个类型本身不接受null）。下面是两种可行的解决方案：

方法一：修改state类型，允许projects为null #

这是最符合实际场景的方案——组件初始化时还没有获取到数据，projects自然可以是null。只需要在state类型里给projects加上| null的联合类型：

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

// 修改state类型，让projects可以是ListProjectsQuery或null
class App extends Component<{}, { projects: ListProjectsQuery | null }> {
  state = { projects: null }; // 现在类型检查通过

  async componentDidMount() {
    // API.graphql返回的是GraphQLResult类型，需要断言data的类型
    const response = await API.graphql<GraphQLResult<ListProjectsQuery>>(graphqlOperation(listProjects));
    this.setState({ projects: response.data as ListProjectsQuery });
  }

  render() {
    const { projects } = this.state;

    // 渲染前先判断数据是否存在，避免空值访问
    if (!projects?.listProjects?.items) {
      return <div>Loading projects...</div>;
    }

    return (
      <div>
        {projects.listProjects.items.map(project => {
          // 因为items里的元素也可能是null，所以要额外判断
          if (!project) return null;
          return <div key={project.id}>{project.name}</div>;
        })}
      </div>
    );
  }
}

方法二：初始化符合ListProjectsQuery类型的空结构 #

如果你不想让projects为null，可以手动构建一个符合ListProjectsQuery类型的空初始值，确保所有必填的__typename和属性都存在：

class App extends Component<{}, { projects: ListProjectsQuery }> {
  // 初始化一个完全符合ListProjectsQuery类型的空结构
  state = {
    projects: {
      listProjects: {
        __typename: "ModelProjectConnection",
        items: [],
        nextToken: null
      }
    } as ListProjectsQuery
  };

  async componentDidMount() {
    const response = await API.graphql<GraphQLResult<ListProjectsQuery>>(graphqlOperation(listProjects));
    this.setState({ projects: response.data as ListProjectsQuery });
  }
}

关键说明 #

• Amplify自动生成的ListProjectsQuery类型中，listProjects本身可以是null，但整个projects字段在你原来的类型定义里是必填且不能为null的，这就是初始值null报错的原因。
• 使用API.graphql时，最好通过泛型指定返回的GraphQLResult类型，再把response.data断言成ListProjectsQuery，避免类型模糊。

内容的提问来源于stack exchange，提问作者Josh Pittman