Как разделить шаблоны страниц на отдельные компоненты, каждый из которых запрашивает данные?

Question

Я создал шаблон блога в Гэтсби. Теперь я хотел бы разбить страницу на функциональные компоненты, каждый из которых получает данные через useStaticQuery.

Насколько мне известно, переменные Graphql работают только с запросами страниц, и литералы шаблонов также не исключаются:

const Slideshow = props => {

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

   ...

}

Как сообщить компоненту, какие данные запрашивать?

Answer 1

Сам компонент не должен выполнять никаких запросов. Вы должны абстрагировать эту часть в шаблон.

Сначала используйте createPages API в gatsby-node.js для создания сообщений блога с шаблоном, например:

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

. Вы можете видите, в моем случае я передаю идентификатор и идентификатор языка в мой шаблонный запрос в 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, так что этот запрос очень специфичен c для 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;