javascript - 如何将页面模板拆分为单独的组件，每个组件都查询数据？

Question

我在 Gatsby 中创建了一个博客文章模板。现在我想将页面分解为功能组件，每个组件通过 useStaticQuery 提取数据。

据我所知，Graphql 变量仅适用于页面查询，模板文字也不异常(exception):

const Slideshow = props => {

  const data = useStaticQuery(
    graphql`
      query {
        contentfulPost(slug: { eq: "${ props.slug }" }) {
          images {
            title
            description
            sizes
          }
        }
      }
    `

   ...

}

如何让组件知道要查询哪些数据？

Answer 1

组件本身不应执行任何查询。您应该将该部分抽象为模板。

首先，使用 gatsby-node.js 中的 createPages API 通过模板生成博客文章，如下所示:

...
createPage({
  path: `${entity.entityTranslation.entityUrl.path}`,
  component: path.resolve(`./src/templates/article.js`),
  context: {
    id: entity.entityTranslation.entityId,
    languageId: lang.toUpperCase(),
  },
})
...

您可以看到，在我的例子中，我将 ID 和语言 ID 传递给 article.js 中的模板查询:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout/layout"
import ArticleFull from "../components/node/article-full";

export default ({ data }) => {

  return (
    <Layout>
      <ArticleFull entity={data.drupal.nodeById.entityTranslation} />
    </Layout>
  )
}

export const query = graphql`
  query($id: String!, $languageId: Drupal_LanguageId!) {
    drupal {
      nodeById(id: $id) {
        ... on Drupal_NodeArticle {
          entityTranslation(language: $languageId) {
            ...ArticleFull
          }
        }
      }
    }
  }
`;

该查询检索每篇文章的数据。就我而言，源是 Drupal，因此此查询对于 Drupal 来说非常特定，但您应该能够根据您的 graphql 数据对其进行自定义。请注意我在这里如何使用片段 (ArticleFull)。

我的实际组件是 ArticleFull ，如下所示:

import React from "react";
import "./article-full.scss"

const ArticleFull = (props) => {

  return (
    <div className="article-full">
      <h1>{props.entity.entityLabel}</h1>
      <div className="article-body" dangerouslySetInnerHTML={{ __html: props.entity.body.processed }}></div>
    </div>
  )
};

export default ArticleFull;