Getting GraphQL data into Gatsby

Question

I have a working query within my playground. But unsure how to get that data into the page? Below is my working query.

Do I use <p>{data.node.GitHub_Repository.name}</p> to get the relevant data, I am looking to build something similar to the pinned repos on GitHub profile page for my personal site.

Tried a few things but always get TypeError: undefined is not an object (evaluating....

const PinnedRepos = () => {
    const data = useStaticQuery(graphql`
    query{
        github {
          user(login: "mrpbennett") {
            pinnedItems(first: 6, types: REPOSITORY) {
                edges {
                node {
                    ... on GitHub_Repository {
                    name
                    description
                    url
                    primaryLanguage {
                        name
                        color
                    }
                    }
                }
                }
            }
            }
        }
      }
    `)

    return (
        <div>
            <p>{data.node.GitHub_Repository.name}</p>
        </div>
    )
}

Playground Query is as follows:

query{
        github {
          user(login: "mrpbennett") {
            pinnedItems(first: 6, types: REPOSITORY) {
                edges {
                node {
                    ... on GitHub_Repository {
                    name
                    description
                    url
                    primaryLanguage {
                        name
                        color
                    }
                    }
                }
                }
            }
            }
        }
      }

Answer 1

You aren't accessing the query data correctly. Also note that pinnedItems is defined as an array, so you must map over it and render the node names like below

return (
    <div>
        {data.github.user.pinnedItem.edges.map(({node}) => <p>{node.name}</p>)
    </div>
)