CODEWITHSUNDEEP
reactjsgraphqlgatsby
mrpbennett
mrpbennett

Reputation: 1976

Getting GraphQL data into Gatsby

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
                    }
                    }
                }
                }
            }
            }
        }
      }

Upvotes: 1

Views: 126

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282120

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>
)

Upvotes: 2

Related Questions