Как использовать запросы GraphQL в компоненте класса контейнера

Question

?

Мой текущий проект GatsbyJS - это один пейджер с каруселью и некоторым другим контентом.

Фон

Карусель должна быть заполнена информацией о некоторых продуктах.Моя цель состоит в том, чтобы позволить карусели строить себя, перебирая все файлы уценки, выбирая файлы с тремя строками вверху файла:

---
type: product
---

Итак, я создал CarouselContainer (класскомпонент) и Carousel компонент (функциональный компонент).Контейнер должен загрузить уценку через запрос GraphQL и передать полученный объект products в его вложенный компонент.Затем компонент должен отобразить объект и создать карусель.

Но есть и другие файлы уценки для списков меню, текстовых модальных сообщений и так далее.У них есть type: page.Я думал, что подготовка нескольких запросов GraphQL будет решением.Но это оказалось сложнее, чем ожидалось ...

Контейнерный компонент является компонентом класса, поэтому я не могу вызвать запрос непосредственно в нем (https://github.com/gatsbyjs/gatsby/issues/3991#issuecomment-364939030).

ТогдаЯ думал, что решение нескольких запросов в pages/index.js может быть решением.

export const indexQuery = graphql`
query IndexQuery {
  allMarkdownRemark(filter: {frontmatter: {type: {eq: "page"}}}) {
    edges {
      node {
        frontmatter {
          title
          text
        }
      }
    }
  }
}
`

export const productsQuery = graphql`
query ProductsQuery {
  allMarkdownRemark(filter: {frontmatter: {type: {eq: "product"}}}) {
    edges {
      node {
        id
        frontmatter {
          title
          content
        }
      }
    }
  }
}
`

Нет, снова. Использование фрагментов GraphQL должно быть решением ...

Q Может кто-нибудь сказать мне, как подготовить фрагменты для этой цели и / или есть другая идея, как получить контент уценки прямо в мой контейнер?

Спасибо за чтение.

Answer 1

Ты не слишком далеко.GraphQL поддерживает несколько дискретных узлов, запрашиваемых в одном запросе:

export const query = graphql`
  {
    products: allMarkdownRemark(
      filter: { frontmatter: { type: { eq: "product" } } }
    ) {
      edges {
        # ...
      }
    }

    pages: allMarkdownRemark(
      filter: { frontmatter: { type: { eq: "pages" } } }
    ) {
      edges {
        # ...
      }
    }
  }
`

Обратите внимание, что я использовал псевдонимы для извлечения одного и того же начального узла (allMarkdownRemark) с отдельными фильтрами в одном и том же запросе GraphQL.Это приведет к тому, что data.products и data.pages будут переданы в default экспортированный компонент React.

Чтобы очистить это, вы можете использовать фрагменты, что позволит вам объединить ваш запрос products в вашем Carousel файл:

В carousel.js (или любом другом файле, в котором находится ваш компонент Карусели):

export const query = graphql`
  fragment Products on Query {
    products: allMarkdownRemark(
      filter: { frontmatter: { type: { eq: "product" } } }
    ) {
      edges {
        # ...
      }
    }
  }
`

Затем в вашем файле подкачки:

export const query = graphql`
  {
    pages: allMarkdownRemark(
      filter: { frontmatter: { type: { eq: "pages" } } }
    ) {
      edges {
        # ...
      }
    }

    ...Products
  }
`

Примечание:если вы используете Gatsby 1.x, вам нужно изменить часть фрагмента on Query на on RootQueryType.

Предполагая, что вы используете Gatsby v2, вы также можете использовать StaticQuery вместо объединения запроса в один.Это особенно полезно, если ваши страницы не имеют отношения к карусели товаров.

import React from "react";
import { graphql, StaticQuery } from "gatsby";

class Carousel extends React.Component {
  // ...
}

export default props => (
  <StaticQuery
    query={graphql`
      products: allMarkdownRemark(
        filter: { frontmatter: { type: { eq: "product" } } }
      ) {
        edges {
          # ...
        }
      }
    `}
    render={({ products }) => <Carousel products={products} {...props} />}
  />
);