Populating Github GraphQL in React (Gatsby)

Question

I am trying to create a page displaying my pinned repos. I am using gatsby and have installed the gatsby-source-github-api

{
            resolve: 'gatsby-source-github-api',
            options: {
                token: 'xxxxxxxxx',
            },
        },

And I have the query populating the data I want in the GraphQL plaryground.

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

However I am struggling to get that data to populate into a new component I keep getting 7:13 error Cannot query field "user" on type "Query" graphql/template-strings

This is the component

I am not really to sure how to populate the data i need.

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'

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

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

export default PinnedRepos

any advice would be greatly appreciated.

Answer 1

The syntax of your query is the problem here, you need to write the query like

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