Typescript 和 Gatsby：gatsby-plugin-ts + graphQL 查询集成

Question

我用来gatsby-plugin-ts为我的 graphql 页面查询生成类型。

我遇到的问题是，生成的所有类型都会返回T | undefined所有字段的类型，因此我需要在任何组件中使用它们之前检查所有查询子字段，否则编译器将引发错误。

举gatsby-plugin-image个例子。给出一个查询：

export const query = graphql`
  query IndexPage {
    banner: file(relativePath: { eq: "banner.jpg" }) {
      childImageSharp {
        gatsbyImageData(width: 1920)
      }
    }
  }
`;

结果data.banner应该传递给getImage函数，但如果您尝试这样做，打字稿可以理解地抛出以下错误，因为 undefined 不能分配给IGAtsbyImageData预期的getImage

当涉及更复杂的查询（例如来自 markdownremark 插件的查询）时，情况会更糟：每次都需要手动检查一个查询结果的所有子字段。有解决办法吗？

Answer 1

data.banner 的类型应该是 ImageDataLike

export interface DataBannerProps {
  banner: ImageDataLike;
  alt: string;
}