Github GraphQL API link not fetching data through React Web App, Error Found

I want to create a react web app that outputs data from github with the GitHub graphql API. So I used a method that I used in creating a weather web app which still uses graphql and react but my app throws an error because the data cannot be feteched from GitHub. The error returned in the console indicates it is a post 401 error associated with the link I add as my URI which is https://api.github.com/graphql . I have the web app as it is right now on my repository. Below is the error shown on the browser console and the three files of my code. Thankyou in advance.



The three files with the code:
• 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
    }
  }
`;

from Github GraphQL API link not fetching data through React Web App, Error Found