Client Side React Application using GitHub GraphQL API - RepoFinder

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

React
GraphQL
Apollo Client
Semantic UI React

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

…

View on GitHub

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! 💙