1

我在我的 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（我使用钩子的地方），我收到以下错误：

类型 'Maybe<Pick<SiteSiteMetadata, "title" | 上不存在属性 'title' “说明” | “作者” | “年”>> | 不明确的'

4

0 回答 0