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

我想创建一个react web应用程序，使用github graphql API从github输出数据。所以我使用了一种方法，我在创建一个仍然使用graphql和react的应用程序时使用了这种方法，但是我的应用程序抛出了一个错误，因为无法从GitHub中提取数据。控制台中返回的错误表明这是一个post 401错误，与我添加为URI的链接相关，该链接为。我有一个web应用程序，因为它现在在我的电脑上。下面是浏览器控制台上显示的错误和我的代码的三个文件。先谢谢你



代码为：
•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;

---

如果代码中缺少auth标记，请查看如何创建一个

在官方指定中，您需要OAuth令牌，并且有一些

要与GraphQL服务器通信，需要一个OAuth令牌 使用正确的范围

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

使用以下内容更新你的

App.js

文件：

import'/App.css'；
从“/Pages/Home.jsx”导入主页；
从“@apollo/client”导入{ApolloClient，InMemoryCache，ApolloProvider，createHttpLink}；
从'@apollo/client/link/context'导入{setContext}；
函数App（）{
//设置名为token的localstorage变量
setItem（'token'，'my fancy token string'）；
//创建http链接
const httpLink=createHttpLink({
uri:'https://api.github.com/graphql',
});
//生成并设置带有身份验证详细信息的标题
const authLink=setContext（（{headers}）=>{
//从本地存储中获取身份验证令牌（如果存在）
const token=localStorage.getItem（'token'）；
//将标题返回到上下文，以便httpLink可以读取它们
返回{
标题：{
…标题，
授权：令牌？`Bearer${token}`:“”，
}
}
});
//使用authLink和httpLink生成客户端
const客户端=新客户端({
缓存：新的InMemoryCache（），
链接：authLink.concat（httpLink）
});
报税表（<
提供程序客户端={client}>
<
主页/>
<
/阿波罗提供商>
);
}
导出默认应用程序；

有关更多详细信息，您可以查看阿波罗的照片

注意：请记住，OAuth令牌就像您的帐户密码，因此您必须对其保密，不要共享它，请注意在更新代码时不要将其推送到github上。为了避免任何问题，不要将令牌保存在代码中，比如

localStorage.setItem（'token'，'my fancy token string'）但将其作为环境变量

您可以在linux上执行此操作，如导出MYTOKEN=my fancy token string

。 在您的代码中，您可以使用

const-token=process.env.MYTOKEN

要从env变量读取的代码：

import'/App.css'；
从“/Pages/Home.jsx”导入主页；
从“@apollo/client”导入{ApolloClient，InMemoryCache，ApolloProvider，createHttpLink}；
从'@apollo/client/link/context'导入{setContext}；
函数App（）{
//创建http链接
const httpLink=createHttpLink({
uri:'https://api.github.com/graphql',
});
//生成并设置带有身份验证详细信息的标题
const authLink=setContext（（{headers}）=>{
//从env变量获取身份验证令牌（如果存在）
const token=process.env.MYTOKEN；
//将标题返回到上下文，以便httpLink可以读取它们
返回{
标题：{
…标题，
授权：令牌？`Bearer${token}`:“”，
}
}
});
//使用authLink和httpLink生成客户端
const客户端=新客户端({
缓存：新的InMemoryCache（），
链接：authLink.concat（httpLink）
});
报税表（<
提供程序客户端={client}>
<
主页/>
<
/阿波罗提供商>
);
}
导出默认应用程序；
您是否已生成具有正确权限的工作令牌？您从文件中读取的内容是否正确？尝试使用
console.log（令牌）打印令牌
并验证它。我看到您在github上的最后一次提交，您没有更新从env变量读取的代码，您正在从localstorage读取，因此如果您将变量放入env，您必须从env而不是本地存储读取，请参阅答案中的第二个代码。太好了，我非常感谢Carlo，是我在.ENV文件中添加令牌后没有重新启动服务器。您可以在这里@Carlo Zanocco帮助我回答有关此应用程序的另一个问题
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;

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

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