Gatsby: custom useStaticQuery hooks and map() function

[NeworkAvocats]

Hi,

I want to use custom useStaticQuery hooks, explain here : Composing custom useStaticQuery hooks

This article is great, but i want to use this functionality with map() function to display data from Wordpress (titles, articles...)

_src/hooks/use-wordpress.js_

import { useStaticQuery, graphql } from "gatsby"

const useSiteWordpress = () => {

  const { allWordpressPost } = useStaticQuery(

    graphql`
      query SitePostWordpress {
        allWordpressPost {
          edges {
            node {
              title
            }
          }
        }
      }

    `
  )

  return allWordpressPost.edges

}

export default useSiteWordpress

_src/components/news.js_

import React from "react"
import useSiteWordpress from '../hooks/use-wordpress'

const News = () => {

    const {node} = useSiteWordpress()

    const data = {node}

    return(

        <div>
            {
                data.map(item =>{

                    return (
                        <div>{item.title}</div>
                        )

                })

            }

        </div>

    )
}

export default News

GRAPHiQL

query SitePostWordpress {
  allWordpressPost {
    edges {
      node {
        title
      }
    }
  }
}

RESULT

{
  "data": {
    "allWordpressPost": {
      "edges": [
        {
          "node": {
            "title": "Attention..."
          }
        },
        {
          "node": {
            "title": "Conclure..."
          }
        },
        {
          "node": {
            "title": "Actualités..."
          }
        }
      ]
    }
  }
}

Error

TypeError: data.map is not a function
News
C:/Users/DavidMinucci/MinucciTech/nework-site/src/components/news.js:1
> 1 | import React from "react"
  2 | import useSiteWordpress from '../hooks/use-wordpress'
  3 | 
  4 | const News = () => {

Any ideas ? Thanks.

[LekoArts]

Thank you for opening this!

Your useSiteWordpress() is already returning an array (the allWordpressPost.edges) so you can't destructure node out of this. Save useSiteWordpress() in a variable and iterate over that :)

So something like:

const data = useSiteWordpress()

...

data.map(site => { return <div>{site.node.title}</div> })

In the future you can debug this yourself by using e.g. debugger or printing out the result of the hook in a console.log.

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby!