我试图 在一个反应项目中从中继一步一步的指南中实现中继概念。
尽管执行了步骤,但我的应用程序无法获取数据并且始终在屏幕上显示“正在加载”(三元错误)。
注意:我已经从 github 生成了个人访问令牌,保存在 github 项目的 .env.local 文件和
本地项目的 .env 文件下(我的 github 项目只有两个文件 .env.local 和 .readme)。
观察:当我执行'response'的console.log时,它会打印401。
?无法通过第 2.3 步
?我应该在 app.js(目前是 facefook)中更改存储库所有者,还是我错过了一些重要的东西。
评论:令人惊讶的是,当我从命令行使用 curl 时,它会给出数据。
curl -H “授权:承载 github_auth_token_here” https://api.github.com/graphql
fetchGraphQL.js 文件
async function fetchGraphQL(text, variables) {
const REACT_APP_GITHUB_AUTH_TOKEN = process.env.REACT_APP_GITHUB_AUTH_TOKEN;
// Fetch data from GitHub's GraphQL API:
const response = await fetch('https://api.github.com/graphql', {
method: 'POST',
headers: {
Authorization: `bearer ${REACT_APP_GITHUB_AUTH_TOKEN}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: text,
variables,
}),
});
console.log('response...', response)
// Get the response as JSON
return await response.json();
}
export default fetchGraphQL;
app.js 文件
import './App.css';
import React from 'react';
import fetchGraphQL from './fetchGraphQL';
const { useState, useEffect } = React;
function App() {
// We'll load the name of a repository, initially setting it to null
const [name, setName] = useState(null);
// When the component mounts we'll fetch a repository name
useEffect(() => {
let isMounted = true;
fetchGraphQL(`
query RepositoryNameQuery {
repository(owner: "facebook" name: "relay") {
name
}
}
`).then(response => {
// Avoid updating state if the component unmounted before the fetch completes
if (!isMounted) {
return;
}
const data = response.data;
setName(data.repository.name);
console.log("response...", response);
}).catch(error => {
console.error(error);
});
return () => {
isMounted = false;
};
}, [fetchGraphQL]);
// Render "Loading" until the query completes
return (
<div className="App">
<header className="App-header">
<p>
{name != null ? `Repository: ${name}` : "Loading"}
</p>
</header>
</div>
);
}
export default App;