Client Side React Application using GitHub GraphQL API - RepoFinder
Tags: react, graphql, javascript, github
Published: 2021-10-18 00:12:04

##### 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 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lpnidj8olis8htdp1ib.JPG)

#### Motivation
I recently created [My Portfolio](https://malik-idrees.github.io/) 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]('https://reactjs.org/')
> [GraphQL]('https://graphql.org/')
> [Apollo Client]('https://www.apollographql.com/docs/react/get-started/')
> [Semantic UI React]('https://react.semantic-ui.com/')

#### 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 malik-idrees/Repo-Finder %}

#### Defining Queries:
I have defined two queries: GET_USER_INFO, GET_USER_REPOS 
```javascript
const GET_USER_INFO = gql`
//Insert User Query
`
const GET_USER_REPOS= gql`query{} `
``` 
Here's how GET_USER_INFO looks like
```javascript
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:

```javascript
   //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]('https://docs.github.com/en/graphql/overview/explorer')
```javascript
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](#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<a name="axios"></a>
```javascript
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! :blue_heart: