Как запросить призматические срезы и вернуть данные из каждого среза

Question

Я пытаюсь использовать отладчик Gatsby /___graphq, а файл README для gatsby-source-prismic говорит, что вы можете возвращать фрагменты. Итак, ниже я возвращаю фрагмент с именем PrismicProductBodySteps.

{
  allPrismicHomePage {
        edges {
          node {
        data {
          seo_title
          body {
            __typename
            ... on PrismicProductBodySteps {
              }
            }
          }
        }
       }
    }
  }
}

Может кто-нибудь объяснить мне, что... на PrismicProductBodySteps означает?

В компоненте Гэтсби я видел это в качестве примера.

body {
  ... on PrismicProductsBodySteps {
    ...ProductStepsFragment
}

Может кто-нибудь объяснить мне, что означает...ProductStepsFragment?

Answer 1

PrismicProductBodySteps будет именем пользовательского типа узла, представляющим динамический ряд блоков контента. Это имя типа пользовательского узла происходит из модели данных Prismic; ваш, скорее всего, будет другим.

Согласно gatsby-source-prismic Документация, использующая пользовательские имена типов узлов, требует, чтобы вы выяснили, какими они являются первыми:

Самый простой способ получить тип узлов - использовать отладчик /___graphql и выполнить приведенный ниже запрос (настроить тип документа и имя поля).

{
  allPrismicPage {
    edges {
      node {
        id
        data {
          body {
            __typename
          }
        }
      }
    }
  }
}

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

{
  allPrismicHomePage {
    edges {
      node {
        data {
          seo_title
          body {
            __typename
            ... on PrismicYourContentBlockOne {
              text {
                html
              }
            }
            ... on PrismicYourContentBlockTwo {
              text {
                html
              }
            }
            ... on PrismicYourContentBlockThree {
              text {
                html
              }
            }
          }
        }
      }
    }
  }
}