将生成的 graphql 查询类型与我在 Gatsby 和 Typescript 项目中的自定义 React 挂钩

如何解决将生成的 graphql 查询类型与我在 Gatsby 和 Typescript 项目中的自定义 React 挂钩

我在我的 Gatsby（和 Typescript）项目中为我的站点元数据创建了一个自定义 React 钩子：

// hooks/useSiteMetadata.ts
import { useStaticQuery,graphql } from 'gatsby';

const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            title
            description
            author
            year
          }
        }
      }
    `,);
  return site.siteMetadata;
};

export default useSiteMetadata;

内部例如Header.tsx 我像这样使用它：

const { title } = useSiteMetaData();

在我的标题组件下方：

const Header: FC<Props> = () => {
  const styles = Styles();
  const { title } = useSiteMetaData();

  return (
    <header css={styles.root}>
      <logo siteTitle={title} />
    </header>
  );
};

export default Header;

为了为我的 graphql 查询生成类型，我使用了 Gatsby 插件 Gatsby Typescript Graphql Codegen。

它生成一个文件 graphql-types.ts。从这个文件我可以导入我的 graphql 查询：

import { SiteMetaDataQuery } from '../../graphql-types'

在我的自定义钩子中，我尝试使用它：

const useSiteMetadata = () => {
  const { site }: SiteMetaDataQuery = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            title
            description
            author
            year
          }
        }
      }
    `,);
  return site?.siteMetadata;
};

但是在 Header.tsx 中（我使用钩子的地方），我收到以下错误：

属性 'title' 不存在于类型 'Maybe> |未定义'