Я изо всех сил пытаюсь получить данные из справочной части моего 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]
Контент не отображается.
Кажется, FeaturedActivities и острова будут массивом?
Итак, как я могу получить данные от FeaturedActivities?





Предполагая, что Islands и featuredActivities не являются массивами или объектами, и вы получаете правильные данные из запроса GraphQL, вам просто нужно исправить, как вы деструктурируете и используете значения. Кроме того, поскольку у вас не может быть конфликтующих имен переменных, вам придется переименовать переменные из featuredActivities
const PageTemplate = ({
data: {
islands: {
id, title
featuredActivities: { id: featuredId , title: featuredTitle },
},
},
...
<article key = {featuredId}>
<h3>{featuredTitle}</h3>
</article>
Хм, спасибо за ответ. Думаю, я пробовал это, позволь мне быстро перепроверить
Я получаю эту ошибку, когда делаю это так: ошибка 27:35 Ошибка анализа: конфликт имени аргумента
Вы тоже разрушаете id и титул с островов?
Да, я хочу деструктурировать заголовок с островов, а также с FeatureActivities
Я обновил свой код в вопросе, чтобы вы лучше понимали, что я пытаюсь сделать
обновил мой пост, чтобы учесть это
Я больше не получаю сообщение об ошибке, но я все еще не вижу заголовок или не могу получить идентификатор
Можете ли вы просто попробовать const PageTemplate = ({ data }) => { и данные журнала, чтобы увидеть, действительно ли вы получаете данные из запроса
Даже с featuredActivities: { id: featuredId , title: featuredTitle } получаю данные. Но может быть, <h3>featuredTitle</h3> ошибается?
Внутри идентификатора FeatureActivities есть еще 4 идентификатора, а затем идет заголовок.
Я добавил изображение в свой вопрос из полученной структуры данных. Вы можете видеть, что я получил 4 разных идентификатора в основном идентификаторе.
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 (и так далее для остальных необходимых полей).
Что вы имеете в виду под не работает.? Какую ошибку вы получаете?