Gatsby+TS+GraphQL Typegen组件批量导入Fragment属性为Props的方法

直接利用Gatsby GraphQL Typegen生成的Fragment完整类型即可，无需逐个声明字段：

修改后的组件代码 #

import { graphql } from 'gatsby';

// 使用Partial让Fragment所有字段变为可选属性
const Footer = ({ id, name, phone }: Partial<Queries.FooterFragment>): JSX.Element => {
  return <footer>{phone}</footer>;
};
export default Footer

export const query = graphql`
  fragment Footer on ContentfulBlockFooter {
    id
    name
    phone
  }`;

说明 #

• Gatsby的GraphQL Typegen会自动为你定义的Footer Fragment生成对应的完整类型Queries.FooterFragment，包含id、name、phone所有字段的类型信息。
• 如果希望所有props字段都是必传的，去掉Partial<>即可：

  const Footer = ({ id, name, phone }: Queries.FooterFragment): JSX.Element => {
    return <footer>{phone}</footer>;
  };
  

• 这样你可以直接解构出Fragment里的任意字段作为组件props，不用手动逐个声明每个字段的类型。

内容的提问来源于stack exchange，提问作者Sebastian Berg