DEV Community

Cover image for Client Side React Application using GitHub GraphQL API - RepoFinder
Malik-Idrees
Malik-Idrees

Posted on

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!

Contains react apollo graphql

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

GitHub logo 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{} `
Enter fullscreen mode Exit fullscreen mode

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
      }
   }
`
Enter fullscreen mode Exit fullscreen mode

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 },
   })

Enter fullscreen mode Exit fullscreen mode

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
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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}`
        }
    })
Enter fullscreen mode Exit fullscreen mode

If you like the post. Give It A Thumbs Up! πŸ’™

Top comments (0)