reactjs - 在 React 中填充 Github GraphQL (Gatsby)

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

任何建议将不胜感激​。

标签： reactjsgraphqlgithub-apigatsby

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