Целевой фрагмент в пределах реакции - PullRequest
Новая
       35

Целевой фрагмент в пределах реакции

0 голосов
/ 15 января 2019

Я создаю свой первый реагирующий сайт, используя gatsby с prismic.io в качестве CMS для моего раздела новостей.

В рамках призмы я использую фрагменты для цитат и рекомендуемых изображений в каждой из новостных историй и пытаюсь вытащить эти данные на свою страницу, однако я не уверен, как нацеливаться на конкретные имена фрагментов, которые я создал в релевантный const, который был установлен для каждого.

Запрос GraphQL 

export const query = graphql`
query ($slug:String){
prismicNewsStory (uid:{eq: $slug}) {
                data {
                body {
                    __typename
                    ... on PrismicNewsStoryBodyQuote {
                        primary {
                            quote {
                                text
                            }
                        }
                    }

                    ... on PrismicNewsStoryBodyFeaturedImage {
                        primary {
                            featured_image {
                                url
                            }
                        }
                    }
                }

            }
        }
    }
`

Таргетинг на цель 

const quote = props.data.prismicNewsStory.data.body[0].primary.quote.text
const featured_image = props.data.prismicNewsStory.data.body[1].primary.featured_image.url

Поскольку срезы являются дополнительными в пределах призмы, я сталкиваюсь с проблемами в некоторых новостях, когда featured_image добавляется перед quote, заставляя их менять порядок в body.

Вопрос

Есть ли способ в каждом const нацеливаться на определенный фрагмент или есть лучший способ для меня это сделать?

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Посмотрев и изучив немного больше знаний с @ paul-mcbride, мы пришли к следующему решению, нацеленному на любой __typename. 

const body = props.data.prismicNewsStory.data.body.reduce((object, item) => ({
        ...object,
        [item.__typename]: item.primary
    }), {});

Теперь вы можете использовать имя целевого фрагмента. 

<FeaturedImage src={body.PrismicNewsStoryBodyFeaturedImage.featured_image.url} />

или

<QuoteText>{body.PrismicNewsStoryBodyQuote.quote.text}</QuoteText>

0 голосов
/ 15 января 2019 

//get the array
const body = props.data.prismicNewsStory.data.body;

const {feature_image : fi0, quote: q0} = body[0].primary;
// above line is equivalent to:
//  const fi0 = body[0].primary.feature_image;
//  const q0 = body[0].primary.quote;
// when order is reversed q0 will be undefined 

const {feature_image : fi = fi0, quote : q = q0} = body[1].primary;
// above line is equivalent to:
//  const fi = body[1].primary.feature_image || fi0;
//  const q = body[1].primary.quote || q0;
// when order is reversed fi0 will be assigned to fi

const feature_image = fi.url;
const quote = q.text

или используйте уменьшение 

const reduceStory = (acc, item) => ({
  feature_image: acc.feature_image|| item.primary.feature_image,
  quote: acc.quote || item.primary.quote
})
const story = props.data.prismicNewsStory.data.body.reduce(reduceStory, {});

const feature_image = story.feature_image.url;
const quote = story.quote.text

>

...