在 React 中填充 Github GraphQL (Gatsby)答案

【问题标题】：Populating Github GraphQL in React (Gatsby)在 React 中填充 Github GraphQL (Gatsby)
【发布时间】：2020-04-28 20:14:19
【问题描述】：

我正在尝试创建一个页面来显示我固定的存储库。我正在使用 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

任何建议将不胜感激。

【问题讨论】：

标签： reactjs graphql github-api gatsby

【解决方案1】：

你的查询语法是这里的问题，你需要把查询写成这样

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

【讨论】：