hello everyone!
Ever thought to display GitHub projects dynamically in Your portfolio ?
Today, we will interact with GitHub GraphQL API using react.
Provide a username and get related information. Simple right? let's see!
Here's How the Final App Looks like: RIP Picture Qualtiy!
Motivation
I recently created My Portfolio website with plain HTML , CSS, JavaScript Which also have a GitHub Action To compress these files!. But I wanted to fetch my GitHub info and my projects dynamically so that's how I created a small App which does exactly that!
Tech Used
Features
Fetch User details
Fetch Top Repositories of the user
Components
Easy to reuse and small ones!
Navbar - Title and A logo
RepoCard - Displays repo Image and details
UserCard - User Card with Image and details
RepoCardList - Lists All Repositories
idrsdev
/
Repo-Finder
Written for Dev.to Article. It shows how to Get your repos and render them anywhere like your portfolio. You could get Any user repositories by providing username Leave a star⭐
Env Variables
Create a .env file in then root and add the following
REACT_APP_GITHUB_ACCESS_TOKEN = "YOUR_GITHUB_ACCESS_TOKEN"
Getting Started with Create React App
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
…
Defining Queries:
I have defined two queries: GET_USER_INFO, GET_USER_REPOS
const GET_USER_INFO = gql`
//Insert User Query
`
const GET_USER_REPOS= gql`query{} `
Here's how GET_USER_INFO looks like
const GET_USER_INFO = gql`
query GET_USER_INFO($login: String!) {
user(login: $login) {
id
avatarUrl
name
login
bio
followers(first: 6) {
totalCount
}
following(first: 6) {
totalCount
}
location
}
}
`
Fetch data using useQuery:
//Important ! You must use a variable named login
//#Required By Schema I guess!
const { loading, error, data } = useQuery(GET_USER_INFO, {
variables: { login },
})
Time ?
I worked on and off for around 3/4 days! I wanted to start off with REST API but I wanted to try something different
For day 1: I experiment with GitHub GraphQL API, created a react app
For day 2: Started with frontend and Created a working app
For day 3: Code refactor and breakdown into small components
For day 4: here I am for past few hours
Don't Worry Just Go through getting started guides! There is nothing fancy or complex!
For starters here's how you would get the repos, try it here:
GitHub GraphQL API PlayGround
query{
search(type: REPOSITORY, query: "react", last: 50) {
repos: edges {
repo: node {
... on Repository {
name
url
}
}
}
}
}
Possible Features / Modifications
You could simply use fetch/Axios instead of using Apollo client. Which I myself may do in future!
For Non-Personal use, First get user token by GitHub-Login!
Then experiment with features like Starring your favorite repository.
GitHub GraphQL API documentation is simple & great.
Here's how to perform queries using Axios
let query=`{
query{
rateLimit{
remaining
}
}
}`
axios.post(`https://api.github.com/graphql`,{
query:query
},{
headers:{
'Authorization':`bearer ${token}`
}
})
If you like the post. Give It A Thumbs Up! 💙
Top comments (0)