盖茨比:如何解决 tslint 期望组件在查询组件本身时接收 props

Question

我使用Gatsby和Typescript创建了一个基于Contentful CMS的博客。

我有FeaturedPost组件，我想放在主页中，这是代码：

精选邮报.tsx

interface IProps {
  data: {
    contentfulPost: ContentfulPost;
  };
}
const FeaturedPost: React.FunctionComponent<IProps> = ({ data }) => {
  const { title, description } = data.contentfulPost;
  return (
    <>
      <Header>{title}</Header>;
      <div>{description}</div>
    </>
  );
};
export const query = graphql`
  query featuredPost($slug: String) {
    contentfulPost(slug: { eq: $slug }) {
      title
      slug
      description {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`;
export default FeaturedPost;

这是我的索引页代码：

索引.tsx

const IndexPage: React.FunctionComponent<P> = () => {
  return (
    <Layout>
      <SEO
        title="Home"
        keywords={[`gatsby`, `application`, `react`]}
        description="Index for something I can't remember?!"
      />
      <FeaturedPost />
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }} />
    </Layout>
  );
};
export default IndexPage;

Tslint 现在希望我将一个名为 data 的 prop 传递给组件FeaturedPost因为我在 FeaturedPost 上实现了 interface IProps，但实际上没有data传递。

FeaturedPost本身将其作为来自已发送查询的响应接收。您知道此代码出了什么问题，或者我如何满足 linter 的要求吗？

Answer 1

在 Gatsby v2 中，非页面组件中的 graphql 查询将被忽略。请改用 StaticQuery。下面是一个小示例：

import * as React from 'react'
import { StaticQuery, graphql, Link } from 'gatsby'
type TOCDataType = {
  readonly allSitePage: {
    edges: [
      {
        node: {
          id: string
          path: string
        }
      }
    ]
  }
}
const TableOfContents: React.FunctionComponent<{}> = () => (
  <StaticQuery
    query={graphql`
      query SitePageQuery {
        allSitePage {
          edges {
            node {
              id
              path
            }
          }
        }
      }
    `}
    render={(data: TOCDataType) => (
      <div>
        {data.allSitePage.edges.map(({ node }) => (
          <li key={node.id}>
            <Link to={node.path}>{node.path}</Link>
          </li>
        ))}
      </div>
    )}
  />
)
export default TableOfContents