Получение справочных данных из Graphql с помощью Gatsby / Contentful

Я изо всех сил пытаюсь получить данные из справочной части моего Graphql. У меня есть модель контента Contentful, которая включает ссылки, как вы можете видеть в запросе ниже.

Теперь у меня есть такая простая страница, где я запрашиваю данные из Contentful:

import React from "react"
import { graphql } from "gatsby"

const PageTemplate = ({
    data: {
        islands: {
            id,
            title,
            featuredActivities: { id, title },
        },
    },
}) => {


    return (
                                    <article key = {id}>
                                        <div>
                                            <h3>{title}</h3>
                                        </div>
                                    </article>

                                    <article key = {featuredActivities.id}>
                                        <div>
                                            <h3>{featuredActivities.title}</h3>
                                        </div>
                                    </article>
    )
}

export const query = graphql`
query GetSinglePage($slug: String) {
  islands: contentfulPage (slug: {eq: $slug}) {
        id
        title
        featuredActivities {
            id
            title
            category
            price
            image {
              fluid {
                ...GatsbyContentfulFluid
              }
            }
          }
      }
  }
`
export default PageTemplate

А теперь я хочу получить данные для этой части запроса:

featuredActivities {
            id
            title
            category
            price
            image {
              fluid {
                ...GatsbyContentfulFluid
              }
            }
          }

Я пробовал это:

const PageTemplate = ({
    data: {
        islands: {
            featuredActivities: { id },
            featuredActivities: { title },
        },
    },

и добавил это в:

<article key = {featuredActivities.id}>
  <h3>{featuredActivities.title}</h3>
</article>

Но не работает, кто-то знает, что я делаю не так?

заранее спасибо

[! [введите описание изображения здесь] [1]] [1]

Что вы имеете в виду под не работает.? Какую ошибку вы получаете?

Shubham Khatri 06.04.2021 09:44

Контент не отображается.

patrick 06.04.2021 09:45

Кажется, FeaturedActivities и острова будут массивом?

Shubham Khatri 06.04.2021 09:47

Итак, как я могу получить данные от FeaturedActivities?

patrick 06.04.2021 09:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
46
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Предполагая, что Islands и featuredActivities не являются массивами или объектами, и вы получаете правильные данные из запроса GraphQL, вам просто нужно исправить, как вы деструктурируете и используете значения. Кроме того, поскольку у вас не может быть конфликтующих имен переменных, вам придется переименовать переменные из featuredActivities

const PageTemplate = ({
    data: {
        islands: {
            id, title
            featuredActivities: { id: featuredId , title: featuredTitle },
        },
    },
    ...

    <article key = {featuredId}>
      <h3>{featuredTitle}</h3>
    </article>

Хм, спасибо за ответ. Думаю, я пробовал это, позволь мне быстро перепроверить

patrick 06.04.2021 10:07

Я получаю эту ошибку, когда делаю это так: ошибка 27:35 Ошибка анализа: конфликт имени аргумента

patrick 06.04.2021 10:09

Вы тоже разрушаете id и титул с островов?

Shubham Khatri 06.04.2021 10:10

Да, я хочу деструктурировать заголовок с островов, а также с FeatureActivities

patrick 06.04.2021 10:12

Я обновил свой код в вопросе, чтобы вы лучше понимали, что я пытаюсь сделать

patrick 06.04.2021 10:15

обновил мой пост, чтобы учесть это

Shubham Khatri 06.04.2021 10:17

Я больше не получаю сообщение об ошибке, но я все еще не вижу заголовок или не могу получить идентификатор

patrick 06.04.2021 10:22

Можете ли вы просто попробовать const PageTemplate = ({ data }) => { и данные журнала, чтобы увидеть, действительно ли вы получаете данные из запроса

Shubham Khatri 06.04.2021 10:23

Даже с featuredActivities: { id: featuredId , title: featuredTitle } получаю данные. Но может быть, <h3>featuredTitle</h3> ошибается?

patrick 06.04.2021 10:26

Внутри идентификатора FeatureActivities есть еще 4 идентификатора, а затем идет заголовок.

patrick 06.04.2021 10:39

Я добавил изображение в свой вопрос из полученной структуры данных. Вы можете видеть, что я получил 4 разных идентификатора в основном идентификаторе.

patrick 06.04.2021 10:45
Ответ принят как подходящий

And now I want to get the data for this part of the query

Вы не можете деструктурировать все элементы массива следующим образом:

const PageTemplate = ({
    data: {
        islands: {
            featuredActivities: { id },
            featuredActivities: { title },
        },
    },

Почему? Потому что это массив объектов и структура ({}) не соответствует типу вложенного элемента. А, в случае, если это было, и вам нужно будет ввести каждую конкретную позицию.

Вам может потребоваться:

const PageTemplate = ({
    data: {
        islands: [{
            featuredActivities: { id },
            featuredActivities: { title },
        }],
    },

Обратите внимание на квадратные скобки ([]).

Однако, как я уже сказал, это не идеально, поскольку вам нужно распечатать каждую конкретную позицию массива неизвестной длины. Лучшее и оптимальное решение - деструктурировать до featuredActivities и пройти через все элементы:

const PageTemplate = ({
    data: {
        islands: {
            id,
            title,
            featuredActivities,
        },
    },
}) => {


    return <>
     {featuredActivities.map(({title, id})=>{
       return <div key = {id}>{title}</div>
     })}
    </>
}

Таким образом, вы можете деструктурировать внутри того же цикла в ({title, id}), поскольку вы получаете для каждой конкретной позиции (featuredActivity, итеративная переменная), title и id (и так далее для остальных необходимых полей).

Другие вопросы по теме