graphql 响应和 typescript 类型之间的 Typescript 和 GraphQL 不匹配类型

Question

我正在使用 typescript、react-apollo 和 AWS Appsync 来构建我正在构建的 react 应用程序，但遇到了打字稿警告，我不确定我哪里出错了。

我的 graphql 架构看起来像 -

schema {
    query: Query
}

type Query {
    events: [Event]
}

type Event {
   ...
}

我正在使用useQuery 返回所有事件，例如 -

const {
   loading: eventsListLoading,
   error: eventsListError,
   data: eventsListData
} = useQuery(EVENTS_LIST_HOME);

EVENTS_LIST_HOME 来自 -

export const EVENTS_LIST_HOME = gql`
    query eventsListHome{
        events {
            title
        }
    }
`;

我正在尝试渲染这些项目 -

<table>
   {
      eventsListData.events.map((event: IEvent) => (
         <tr>
             <td>{event.title}</td>
         </tr>
      ))
   }
</table>

我有一个打字稿界面IEvent

export default interface IEvent {
    title: string;
}

但我得到了错误 -

我尝试将 typescript 类型重命名为 Event 而不是 IEvent 并添加其他参数、索引和数组，即使它们没有被使用，但同样的错误

我错过了什么？如何在 typescript 中使用 Event 的 grapghql 类型？

Answer 1

您应该使用 apollo codegen 为您的 graphql 架构中声明的类型生成 TypeScript 类型 - https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output。

Event 和 IEvent 之间似乎存在类型不匹配。没看到Event的定义就不能多说。

使用apollo codegen 生成的类型应该可以修复类型错误。