How To Use the GitHub GraphQL API in Vue.js with Vue apollo

7 min readJul 11, 2019

image copyright : https://vue-apollo.netlify.com/ by Created by Guillaume CHAU (@Akryum)

This is sample demo project which contains how we can use the GitHub graphql API in Vue with the vue apollo.

Initially I want to express my sincere thanks to the Guillaume CHAU for this amazing library for Vue. It has got the CLIs functionality and some pretty functions too which are too deep for this blog.

Below are the takeaway in this blog

What we are building ?.
What is graphql.
Brief introduction about the Github Graphql API.
Create token for GitHub API.
Test GitHub API in tool.
Create Vue project and add the vue-apollo.
Test with Open source graphql endpoint.
Integrate Github Graphql to our app and test.
Add the code to fetch the ruby language.
Add the option to search for another languages.
Links and other details.

1. What we are building ?.

We are creating a Vue application which is useful to fetch the trending repos from the GitHub using graphql API and vue-apollo.

The home page will fetch the trending repos from ruby language. Also added an option to fetch the the trending repos based on user.

This idea and design is got from link. They have used the REST API to fetch the data from GitHub. But I have changed it to use the graphql API and able to search option as well. Please visit the above link if you need more information.

2. What is graphql.

Copying the content from official website,

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Graphql got more pros like, no versioning needed, only one end point for every query and mutation and others. We are currently dealing with the app only not into detailed explanation of the graphql.

3. Brief introduction about the Github Graphql API.

GitHub released their own API for public use provided we need to use the token for query and mutation.

By using this API, we can use to star any repo and fetch other details also , but keep in mind that GitHub created this API for integrating to our own apps not to create the clone of GitHub.

https://api.github.com/graphql

Is the common endpoint for the GitHub graphql API.

For more details, please visit this link.

4. Create token for GitHub API.

I don’t want to repeat the something which is already there :D. Please got through this link and create for yourselves.

Copy the token and save that in a secure place, because you can see the token only one time. We need to use this token in the coming part.

5. Test GitHub API in tool.

To test the GitHub API, I have used an app called GraphiQL which is created using electron.js and its’s mac version is used. Link for the app

Click on edit http headers and add your token like below

Now, we need to try out with the simple query,

query:

query($number_of_repos:Int!) {
  viewer {
    name
     repositories(last: $number_of_repos) {
       nodes {
         name
       }
     }
   }
}

query variables:

{
   "number_of_repos": 3
}

Aha, we got the output, this output is coming from my own account. so your’s will be different.

6. Create Vue project and add the vue-apollo.

To create a vue app, use the vue-cli functionality,

vue create graphql-vue-github

It will open the interactive terminal select the features you need,

now, proceed with the installation of dependencies.

From the official docs for the vue-apollo,

This library integrates apollo in your Vue components with declarative queries. Compatible with Vue 1.0+ and 2.0+.

If you don’t know nothing about graphql and apollo, visit this link and watch the slide , it is simple and worth your time.

We can add vue-apollo to our project using the command,

vue add apollo

It will install all the dependencies and create the vue-apollo.js which is the config file for the Vue.

Visit this link to view what all changes are added vue-apollo.

7. Test with Open source graphql endpoint.

We have successfully integrated the vue-apollo to our app. Now, we need to test our application whether it is working as expected. for that,

in src/queries/sample.js

import gql from 'graphql-tag'
export const Sample = gql`
query{
    jobs{
      title
    }
  }
`

src/components/HelloWorld.vue

<template>
  <h3>{{jobs}}</h3>
</template>

<script>
import { Sample } from '../queries/sample'
export default {
  apollo: {
    jobs: Sample
  },
  data () {
    return {
      jobs: []
    }
  }
}
</script>

<style>

</style>

src/vue-apollo.js

const httpEndpoint = 'https://api.graphql.jobs/'

Then, start the dev server using the (I am using yarn)

yarn serve

Awesome, we got our first output from jobs graphql API.

Note: if any issue in the terminal, please visit this link and change the code in the vue-apollo.js file.

8. Integrate Github Graphql to our app and test.

Create env file.
Update vue-apollo file.
Update the UI.

1. Create env file.

create the .env in the root path of the app and paste your gitHub auth token.

VUE_APP_GITHUB_GRAPHQL_AUTH_TOKEN=XXXXXXXXXXXXXXXX

2. Update vue-apollo file.

const httpEndpoint = ' https://api.github.com/graphql'

add this method in the vue-apollo.js file

3. Update the UI.

src/queries/sample.js

import gql from 'graphql-tag'
export const Sample = gql`
query {
  repository(owner:"octocat", name:"Hello-World") {
    issues(last:20, states:CLOSED) {
      edges {
        node {
          title
          url
          labels(first:5) {
            edges {
              node {
                name
              }
            }
          }
        }
      }
    }
  }
}
`

src/components/HelloWorld.vue

<template>
  <h3>{{repository.issues}}</h3>
</template>

<script>
import { Sample } from '../queries/sample'
export default {
  apollo: {
    repository: Sample
  },
  data () {
    return {
      repository: []
    }
  }
}
</script>

<style>

</style>

All set, now we are good to go, visit this link if any error happen.

9. Add the code to fetch the ruby language.

Until now, we are working on some meaningless files and now we need to create files and working real use case. To do that , need to rename some files and create some as well. In this part, our aim is to fetch trending repos from ruby language.

Below is the current project structure of our app,

we have 2 components mainly

toolBar.vue -> will display our navbar
TrendingRepo.vue -> will display our trending repos.

our views got 2 view pages will show the components in that.

Home.vue -> be the root path
Search.vue -> be the search page, will discuss later.

When Home page is displayed, we are passing the ruby as the language to our TrendingRepo component which will display the ruby trending repos only.

To do that,

explanation:

we are passing a homeSearchString: ‘ruby’ from the Home.vue page.

This will come as a prop to the TrendingRepo.vue. This prop is called the searchString.

This prop value is passed to our query and this.value and fetch the result using the search.

Pretty simple right, I created the query as a separate file so that there is a better understanding about the workflow.

10. Add the option to search for another languages.

Update the routes file
Add the code in Search.vue page.
Pass the parameter from the toolBar.vue

1. Update the routes file

Need to add the code in src/router.js to redirect to the Search page.

2. Add the code in `Search.vue` page.

explanation:

When the application runs, the toolBar also displayed. Now when we tried to search for a language search bar and click on the search button, then it will in turn call the searchForData () method and it will pass the data got from search bar as search parameters.