在React中填充Github GraphQL (Gatsby)

在React中填充Github GraphQL (Gatsby)可以通过以下步骤完成：

首先，确保你已经安装了React和Gatsby的开发环境。你可以使用Node.js和npm来安装它们。
创建一个新的Gatsby项目。在命令行中运行以下命令：

gatsby new my-github-app

cd my-github-app

安装必要的依赖项。运行以下命令：

npm install @apollo/client graphql

创建一个新的React组件来填充Github GraphQL数据。在src目录下创建一个新的文件，例如GithubData.js，并添加以下代码：

import React from 'react';
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.github.com/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: `Bearer YOUR_GITHUB_TOKEN`,
  },
});

const GithubData = () => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    client
      .query({
        query: gql`
          query {
            viewer {
              login
              repositories(first: 5) {
                nodes {
                  name
                  description
                }
              }
            }
          }
        `,
      })
      .then((result) => setData(result.data));
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>My Github Repositories</h1>
      <ul>
        {data.viewer.repositories.nodes.map((repo) => (
          <li key={repo.name}>
            <h3>{repo.name}</h3>
            <p>{repo.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default GithubData;

在你的主组件中使用GithubData组件。在src目录下的pages文件夹中创建一个新的文件，例如index.js，并添加以下代码：

import React from 'react';
import GithubData from '../components/GithubData';

const IndexPage = () => {
  return (
    <div>
      <h1>Welcome to my Github App</h1>
      <GithubData />
    </div>
  );
};

export default IndexPage;