【Gatby x TypeScript】在页面组件中对从graphql接收到的数据进行类型定义

總結

使用 PageProps 和类型泛型。

请参考这篇文章链接：https://www.gatsbyjs.com/blog/gatsby-5-typescript-and-generated-graphql-types-a-walkthrough/

样本代码

import * as React from "react"
import ComponentX from "./component-x.tsx"
import type { HeadFC, PageProps } from "gatsby"

const IndexPage: React.FC<PageProps> = ({data}) => {
  return (
    <main>
        <h1>{data.siteMetadata.title}</h1>
        <ComponentX data={data} />
    </main>
  )
}
こんな感じで、

export default IndexPage

export const Head: HeadFC = () => <title>Home Page</title>

export const query = graphql`
    query {
      site {
        siteMetadata {
          title
          siteUrl
          description
        }
      }
    }
`

可以通过页面组件接收数据，并进行相应操作，或将其传递给其他组件。

如果要定义GraphQL的类型

可以使用泛型来实现。（参考资料）

import * as React from "react"
import { graphql, PageProps } from "gatsby"
 
const IndexPage = ({ data }: PageProps<Queries.IndexPageQuery>) => {
 return (
   <main>
     <p>Site title: {data.site?.siteMetadata.title}</p>
   </main>
 )
}
 
export default IndexPage
 
export const query = graphql`
 query IndexPage {
   site {
     siteMetadata {
       title
     }
   }
 }

只需按照上述引用页面中提到的设置（如tsconfig.json和gatsby-config.js）进行，即可使用全局命名空间Queries。

从那里可以获得名为${クエリ名}Query的类型，如果使用它，graphql内指定的类型将会生成。（${クエリ名}是指在graphql中指定的查询名字，例如在上述例子中，它是IndexPage）

在上述示例代码中，数据参数使用了这样的类型：
{ readonly site: { readonly siteMetadata: { readonly title: string } } | null };

总结

不需要亲自定义类型，可以非常简单地使用类型。

盖茨比真是令人感激。