在 React (Gatsby) 中填充 Github GraphQL

Question

我正在尝试创建一个页面来显示我固定的回购协议。我正在使用 gatsby 并安装了 gatsby-source-github-api

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

并且我在 GraphQL plaryground 中查询填充了我想要的数据。

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

然而，我正在努力将这些数据填充到一个新组件中，我不断收到 7:13 error Cannot query field "user" on type "Query" graphql/template-strings

这是组件

我不太确定如何填充我需要的数据。

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

如有任何建议，我们将不胜感激。

Answer 1

你查询的语法是这里的问题，你需要像

这样写查询

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

在 React (Gatsby) 中填充 Github GraphQL

Populating Github GraphQL in React (Gatsby)

github-api

reactjs

graphql

gatsby