JS / React - как отобразить два объекта одновременно изнутри объекта

Question

Я работаю над проектом React Gatsby. js. Для функции поиска я использовал плагин gatsby-plugin-local-search

Чтобы этот плагин работал, мне нужно запустить запрос GraphQL в файле gatsby-config.js. И тогда данные обрабатываются в нормализаторе. Ниже приведен пример кода скрипта. Обратите внимание, я вынул нормализатор. Потому что мой вопрос лежит в этом, и я поговорю об этом ниже.

    {
      resolve: "gatsby-plugin-local-search",
      options: {
        name: "pagesNL",
        engine: "flexsearch", // The following engines are supported: flexsearch, lunr
        engineOptions: "speed", // Note: Only the flexsearch engine supports options.
        query: `
          {
            allSanityPage {
              nodes {
                id
                title {
                  _key
                  _type
                  en
                  nl
                }
                _rawBlockRows
                slug {
                  current
                }
              }
            }
            allSanityBlog {
              nodes {
                title {
                  _type
                  en
                  nl
                }
                slug {
                  current
                }
                _id
                _rawBody
              }
            }
          }
        `,
        ref: "id",
        index: ["id", "title", "body"],
        store: ["id", "path", "title"],
        normalizer: ({ data }) => (
            // do something with the data <----------------
        ),
      },

Как вы можете видеть, я запрашиваю allSanityPage и allSanityBlog. Теперь цель состоит в том, чтобы объединить данные и отобразить их одновременно из этого сценария.

Вопрос

Как я могу .map() их сразу?

сначала рабочий пример для allSanityPage

       normalizer: ({ data }) => (
          data.allSanityPage.nodes.map(node => ({
            id: node.id,
            path: node.slug.current,
            title: localizeData(node.title, "nl"),
            body: localizeData(node._rawBlockRows, "nl"),
          }))
       ),

Я ищу способ заполнить его обоими объектами data.allSanityPage.nodes и data.allSanityBlog.nodes

Я думал, что-то вроде этого будет работать:

{...data.allSanityPage.nodes, ...data.allSanityBlog.nodes}.map()

Но это, очевидно, не работает

(меня не волнует body:, так как я бы условно проверил это как body: (node._rawBlockRows) ? localizeData(node._rawBlockRows, "nl"): localizeData(node._rawBody, "nl"), `

Answer 1

На самом деле ваша идея была хорошей, когда вы пытались {...data.allSanityPage.nodes, ...data.allSanityBlog.nodes}.map()

Ошибка в том, что вы .map() один объект, который не имеет этой функции в своем прототипе.

Попробуйте [...data.allSanityPage.nodes, ...data.allSanityBlog.nodes].map(...

Источник: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

Вы можете сделать забаву карты гнезда c в первом веселье отображения c

 normalizer: ({ data }) => (
      data.allSanityPage.nodes.map(node => 
          data.allSanityBlog.nodes.map(node2 =>
             //your code
             )
           )

Примером этого является

a.map(e1 => b.map(e2 => 
     console.log(e1 == e2)))