GITHUB_TOKEN with your own github tokenAll fine-grained personal access tokens include read access to public repositories. To access public repositories with a personal access token (classic), select the "public_repo" scope.
See also: https://docs.github.com/en/graphql/guides/forming-calls-with-graphql & https://tanstack.com/query/latest/docs/framework/react/overview
| import ReactDOM from 'react-dom/client'; | |
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | |
| import App from './App'; | |
| import Projects from './Components/Projects'; | |
| const client = new QueryClient(); | |
| ReactDOM.createRoot(document.getElementById('root')).render( | |
| <QueryClientProvider client={client}> | |
| <App> | |
| <Projects /> | |
| </App> | |
| </QueryClientProvider>, | |
| ) |
| import { useQuery } from '@tanstack/react-query'; | |
| import axios from "axios"; | |
| function Projects() { | |
| const { isPending, error, data } = useQuery({ | |
| queryFn: () => axios({ | |
| url: 'https://api.github.com/graphql', | |
| method: "POST", | |
| data: { | |
| query: `{ | |
| user(login: "abenevaut") { | |
| pinnedItems(first: 6, types: REPOSITORY) { | |
| nodes { | |
| ... on Repository { | |
| id, | |
| name | |
| } | |
| } | |
| } | |
| } | |
| }` | |
| }, | |
| headers: { | |
| Authorization: 'Bearer <GITHUB_TOKEN>' | |
| } | |
| }).then(response => response.data.data) | |
| }); | |
| if (isPending) { | |
| return "Loading..."; | |
| } | |
| if (error) { | |
| return <pre>{error.message}</pre>; | |
| } | |
| return ( | |
| <div> | |
| <ul> | |
| { data.user.pinnedItems.nodes.map((project) => ( | |
| <li key={ project.id }> | |
| <a href={`https://github.com/abenevaut/${project.name}`}> | |
| { project.name } | |
| </a> | |
| </li> | |
| )) } | |
| </ul> | |
| </div> | |
| ) | |
| } |
Stackoverflow - GitHub GraphQL, tokens and SPA