Github GraphQL API 链接未通过 React Web App 获取数据，发现错误

如何解决Github GraphQL API 链接未通过 React Web App 获取数据，发现错误

我想创建一个使用 GitHub graphql API 从 github 输出数据的 React Web 应用程序。所以我使用了一种我在创建 weather web app 时使用的方法，它仍然使用 graphql 并做出反应，但我的应用程序抛出错误，因为无法从 GitHub 获取数据。控制台中返回的错误表明这是与我添加为 URI 的链接相关联的 401 后错误，该链接为 https://api.github.com/graphql 。我现在在我的 repository 上有网络应用程序。下面是浏览器控制台上显示的错误和我代码的三个文件。先感谢您。

包含代码的三个文件：
• App.js

import './App.css';
import Home from "./Pages/Home.jsx";
import { ApolloClient,InMemoryCache,ApolloProvider } from "@apollo/client";

function App() {

  const client = new ApolloClient({
    cache: new InMemoryCache(),uri: "https://api.github.com/graphql",});

  return (
    <ApolloProvider client={client}>
      <Home />
    </ApolloProvider>
  );
}

export default App;

• Home.jsx

import { useLazyQuery } from "@apollo/client";
import { GET_REPO_OWNER_NAME } from "../graphql/Queries.js";


const Home = () => {

  const [getRepoName,{loading,data,error}] = useLazyQuery(GET_REPO_OWNER_NAME);

  if(error) return <h1>Error found</h1>
  if(data){
    console.log(data);
  }

  return (
    <div className="home">
      <h1>Github Issue Tracker</h1>
      <input type="text" placeholder="City name..." />
      <button onClick={ () => getRepoName() }>Search</button>
    </div>
  );
};

export default Home;

• Queries.js

import { gql } from "@apollo/client";

export const GET_REPO_OWNER_NAME = gql `
  query { 
    viewer { 
      login
    }
  }
`;

解决方法

您的代码中缺少身份验证令牌，请查看 here 如何创建一个。

在官方指定的 GitHub docs about graphql 中，您需要一个 OAuth 令牌，并且有一些 resource limitations

要与 GraphQL 服务器通信，您需要一个 OAuth 令牌具有正确的范围。

按照“创建个人访问令牌”中的步骤创建一个令牌。您需要的范围取决于您使用的数据类型试图请求。例如，选择用户范围以请求用户数据。如果您需要访问存储库信息，请选择适当的存储库范围。

使用以下内容更新您的 App.js 文件：

import './App.css';
import Home from "./Pages/Home.jsx";
import { ApolloClient,InMemoryCache,ApolloProvider,createHttpLink } from "@apollo/client";
import { setContext } from '@apollo/client/link/context';

function App() {

    // Set your localstorage variable called token
    localStorage.setItem('token','my-fancy-token-string');

    // Create the http link
    const httpLink = createHttpLink({
        uri: 'https://api.github.com/graphql',});

    // Generate and set the header with the auth details
    const authLink = setContext((_,{ headers }) => {
        // get the authentication token from local storage if it exists
        const token = localStorage.getItem('token');
        // return the headers to the context so httpLink can read them
        return {
            headers: {
                ...headers,authorization: token ? `Bearer ${token}` : "",}
        }
    });

    // Generate your client with the authLink and httpLink
    const client = new ApolloClient({
        cache: new InMemoryCache(),link: authLink.concat(httpLink)
    });

    return ( <
        ApolloProvider client = { client } >
        <
        Home / >
        <
        /ApolloProvider>
    );
}

export default App;

更多详情可以查看阿波罗的official documentation

注意：记住OAuth令牌就像你的账户密码，所以你必须保密，不要分享，注意不要强推github 更新代码时。为避免出现任何问题，请勿将您的令牌保存在 localStorage.setItem('token','my-fancy-token-string'); 之类的代码中，而是将其作为环境变量。

你可以像 export MYTOKEN=my-fancy-token-string 这样在 linux 上做。在您的代码中，您可以使用 const token = process.env.MYTOKEN;

从环境变量中读取的代码：

import './App.css';
import Home from "./Pages/Home.jsx";
import { ApolloClient,createHttpLink } from "@apollo/client";
import { setContext } from '@apollo/client/link/context';

function App() {
    // Create the http link
    const httpLink = createHttpLink({
        uri: 'https://api.github.com/graphql',{ headers }) => {
        // get the authentication token from env variables if it exists
        const token = process.env.MYTOKEN;

        // return the headers to the context so httpLink can read them
        return {
            headers: {
                ...headers,link: authLink.concat(httpLink)
    });

    return ( <
        ApolloProvider client = { client } >
        <
        Home / >
        <
        /ApolloProvider>
    );
}

export default App;