Как запрашивать призматические срезы и возвращать данные из каждого среза
Я пытаюсь использовать отладчик Gatsby / ___ graphq, а файл README для призматический источник Гэтсби говорит, что вы можете возвращать срезы. Итак, ниже я возвращаю фрагмент с именем PrismicProductBodySteps.
{
allPrismicHomePage {
edges {
node {
data {
seo_title
body {
__typename
... on PrismicProductBodySteps {
}
}
}
}
}
}
}
}
Может кто-нибудь объяснить мне, что ... на PrismicProductBodySteps означает?
Я видел это в качестве примера в компоненте Gatsby.
body {
... on PrismicProductsBodySteps {
...ProductStepsFragment
}
Может ли кто-нибудь объяснить мне, что означает ... ProductStepsFragment?
Ответы 1
PrismicProductBodySteps - это имя пользовательского типа узла, представляющее динамическую серию блоков содержимого. Это имя типа настраиваемого узла взято из модели данных Prismic; ваш, скорее всего, будет другим.
Согласно документации gatsby-source-prismic, использование имен пользовательских типов узлов требует, чтобы вы сначала выяснили, что они собой представляют:
The easiest way to get the type of nodes is to use the /___graphql debugger and run the below query (adjust the document type and field name).
{
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
}
}
}
}
}
}
}
}
Также в моем случае что делает body {... on PrismicProductsBodySteps {... ProductStepsFragment}. Иметь в виду. Я предполагаю, что PrismicProductsBodySteps - это фрагмент, но если это так, то что такое ... productStepsFragment.
productStepsFragments - это объект, создаваемый настраиваемым типом узла PrismicProductsBodySteps (оба они настраиваются для вашей модели данных). ...productStepsFragment использует синтаксис распространения ES6, который в основном вызывает и разрушает объект одновременно.
Другой способ подумать об этом - представить свою модель данных серверной части как интерфейс администратора. Вероятно, в нем есть раздел (это будет PrismicProductsBodySteps). В вашем админке вы можете сделать столько из них, сколько захотите - каждый создает свой собственный набор данных, представленных productStepsFragment.
Спасибо за отличное объяснение!
productStepsFragment может иметь любое имя, если вы используете то же имя в своем компоненте, верно? Только PrismicProductsBodySteps уникален для призмы, а не имя фрагмента?
Что ж, и фрагмент productStepsFragment graphQL, и имена пользовательских типов узлов PrismicProductsBodySteps взяты из модели данных, которую вы настроили на Prismic. Они следуют шаблону, который кажется, но у вас есть концепция: какое бы имя вы ни дали модели данных, оно будет передаваться вашему компоненту.
Спасибо @staypuftman, так что я представляю вам пример, когда фрагмент f Eat будет PrismicYourContentBlockOne?