Гэтсби: как вставить данные из фронтматтера (файла Mdx) в компонент

Question

У меня есть серия файлов .mdx, содержащих одну и ту же информацию, но на разных сайтах (например, title = "aswan"; title = "rome" и т. Д.). Эти файлы находятся в папке «метаданные».

Мне нужно вставить информацию MDX в компонент (OurSites.js), который формирует домашнюю страницу сайта (index.js).

Это содержимое компонента OurSites.js:

Вот как выглядит компонент:

Answer 1

У вас есть два варианта:

• Использование запросов страниц
• Использование статических запросов (ловушка)

В первом варианте ваши запросы должны идти на странице (отсюда и название), и вам нужно детализировать реквизиты, содержащие ваши данные, до каждого желаемого компонента. Поскольку у вас уже есть набор запросов, вам просто нужно:

      import * as React from "react";
import Layout from "../components/Layout";
import Slider from "../components/Slider";
import About from "../components/Home/About";
import Methods from "../components/Home/Methods";
import OurSites from "../components/Home/OurSites";
import { graphql } from "gatsby";

// markup
const IndexPage = ({ data }) => {
 console.log("your props.data is inside data: " data); 
 return (
    <Layout>
      <Slider />
      <About />
      <Methods />
      <OurSites sites={data.allMdx.nodes}/>
    </Layout>
  );
};

export const query = graphql`
  {
    allMdx(limit: 8, sort: { fields: frontmatter___title, order: ASC }) {
      nodes {
        id
        frontmatter {
          title
          status
          typology
          image {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
        excerpt
      }
    }
  }
`;

export default IndexPage;

Ваши запрошенные данные (через GraphQL) находятся внутри props.data (деструктурировано как data). Вы можете просмотреть информацию о сайте, data.allMdx.nodes(который представляет собой массив). Итак, в вашем компоненте вам нужно только получить props ( props.sites) и прокрутите их, чтобы динамически отображать ваши данные.

С useStaticQuery подход точно такой же, но данные можно хранить где-нибудь еще (в настраиваемом хуке или во внутреннем OurSites составная часть).