在React中填充Github GraphQL (Gatsby)

gatsby new my-github-app

cd my-github-app

npm install @apollo/client graphql

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;

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;

gatsby develop