Good evening. My task is to create a website with react that will list through github users. I was following this instruction:

I cannot solve it for two days already, please help.

CodePudding user response：

You don't need any authentication for that endpoint. Here's a working example:

• Octokit.js docs
• GitHub REST API docs for getting a user

body { font-family: sans-serif; }
button, input[type="text"] { font-size: 1rem; padding: 0.2rem; }
pre { font-family: monospace; font-size: 1rem; }
.vertical { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

<!-- Babel seemed to have trouble with this, so I'm putting it on window -->
<script type="module">
  import {Octokit} from 'https://cdn.skypack.dev/[email protected]';
  window.Octokit = Octokit;
</script>

<div id="root"></div><script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">

// import * as ReactDOM from 'react-dom/client';
// import {useState} from 'react';
// import {Octokit} from 'octokit';

// This Stack Overflow snippet demo uses UMD modules instead of the commented import statments above
const {useState} = React;

const octokit = new Octokit();

function App () {
  const [user, setUser] = useState('maria98kgm');
  const [userData, setUserData] = useState(undefined);
  const [error, setError] = useState(undefined);

  const updateUserData = async () => {
    try {
      const username = user.trim();
      const response = await octokit.request(`GET /users/${username}`);
      setUserData(response.data);
      setError(undefined);
    }
    catch (ex) {
      if (ex instanceof Error) setError(ex);
      else console.error(ex);
    }
  };

  const displayString = error
    ? error.toString()
    : userData
      ? JSON.stringify(userData, null, 2)
      : 'No data yet';

  return (
    <div>
      <div className="vertical">
        <input
          type="text"
          onChange={ev => setUser(ev.target.value)}
          value={user}
        />
        <button onClick={updateUserData}>Update user data</button>
      </div>
      <pre><code>{displayString}</code></pre>
    </div>
  );
}

const reactRoot = ReactDOM.createRoot(document.getElementById('root'));
reactRoot.render(<App />);

</script>

CodePudding user response：

Explanation of the error.

The 404 status code means your authentication data are not the good ones.

How to solve it.

• First, check your GitHub personal token is ok (i am guessing it is)
• Second, do the following : https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps