Использование map в возвращенном запросе graphql делает известных членов неопределенными

Question

Я использую Gatsbyjs для создания блога, и я не могу использовать onCreatePage API для передачи данных из моего запроса graphql в шаблоны страниц.

Мой запрос получает данные из Kentico Cloud , и это выглядит так.

{
    allKenticoCloudTypeBlogPost{
        edges{
            node{
                contentItems{
                    elements{
                        url_slug{
                            value
                        }
                    }
                }
            }
        }
    }
}

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

Проблема возникает в моем файле gatsby-node.js, где я хочу использовать этот запрос для построения страниц с использованием моего предопределенного шаблона.

В частности, в методе createPage, который выглядит следующим образом.

result.data.allKenticoCloudTypeBlogPost.edges.map(({node}) => {        
    createPage({
        path: `${node.contentItems.elements.url_slug.value}`,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
            slug: node.contentItems.elements.url_slug.value,
        }
    })

});

Отображается следующая ошибка.

TypeError: Невозможно прочитать свойство 'url_slug' из неопределенного

• gatsby-node.js: 31 result.data.allKenticoCloudTypeBlogPost.edges.map C: / Users / xxxx/ Desktop / Marketing Repos / xxxx / gatsby-node.js: 31: 57

Я решил исследовать выполнение console.table на node.contentItems, так как кажется, что elements часть - это то место, где это происходит.

Результат console.table (node.contentItems) непосредственно перед методом createPage - это.

Похоже, что node.contentItems имеет члена с именем url_slug, а не elements, которого я ожидал.

Я думал, что смогу решить свою проблему, обновив вызов метода createPage следующим образом.

result.data.allKenticoCloudTypeBlogPost.edges.map(({node}) => {
    console.table(node.contentItems);

    createPage({
        path: `${node.contentItems.url_slug.value}`,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
            slug: node.contentItems.url_slug.value,
        }
    })

});

Но тогда я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'значение' из неопределенного.

Я действительно не могуЯ понимаю, как я могу сделать журнал таблицы и увидеть член url_slug, но когда я пытаюсь получить к нему доступ, он говорит, что он не определен.Все время я знаю, что мой запрос правильный, потому что я могу запустить его в GraphiQL и получить точные данные, которые я ожидаю.

Любая помощь будет оценена.Спасибо.

Answer 1

В вашем запросе node.contentItems - это массив, даже если вы пытаетесь получить к нему доступ, как будто это объект:

path: `${node.contentItems.elements.url_slug.value}`,
                           ^^^^^^^^

console.log(contentItems) // [ { elements: {...} }, { elements: {...} }, ... ]

Я думаю, что ваша путаница, вероятно, проистекает из способа console.table отображение данных.Это сбивает с толку, если вы еще не знаете форму ваших данных.На скриншоте сказано, что этот объект имеет 4 свойства с индексом 0 -> 3 (скорее всего, массив), каждое из которых имеет одно свойство с именем elements (указано в заголовке таблицы), которое является объектом с единственным свойством url_slug.

---

Я не знаком с KenticoCloud, но, возможно, ваши сообщения вложены в contentItems, и в этом случае вы должны зациклить его:

result.data.allKenticoCloudTypeBlogPost.edges.map(({node}) => {        
  node.contentItems.forEach(({ elements }) => {
    createPage({
      path: elements.url_slug.value,
      context: { slug: elements.url_slug.value },
      component: ...
    })

  })
});

Answer 2

Есть ли причина, по которой вы заключаете узел в фигурные скобки в аргументе карты?

Возможно, вы уже пробовали это, но моя первая интуиция заключалась в том, чтобы сделать это вместо этого:

result.data.allKenticoCloudTypeBlogPost.edges.map(node => {  

    console.log(node.contentItems)
    createPage({
        path: `${node.contentItems.elements.url_slug.value}`,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
            slug: node.contentItems.elements.url_slug.value,
        }
    })

});