0

我试图 在一个反应​​项目中从中继一步一步的指南中实现中继概念。
尽管执行了步骤,但我的应用程序无法获取数据并且始终在屏幕上显示“正在加载”(三元错误)。
注意:我已经从 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;    

响应截图在这里...
console.log 截图

4

0 回答 0