Using your GitHub Repository as a Database

github api database

№: 17

60.2021

How To: Use your Repo as a Database with the Github GraphQL API

Motivation

The Github GraphQL API provides a lot more capabilities than I can cover in one snack.

However, in searching for a way to share the small lessons that I pick up week in week out, I knew that publishing through Contentful, which it the CMS, I use for the main content in my blog site, was a little too much to share easily and quicly. Posting on Github and sharing that as gists seemed like I would be writing too much for a gist that is supposed to be a short code snippet - which was the original title of this section. Although MichaelCurrin proves me otherwise! His article is what got me goint in the first place!

Querying the GraphQL API for posts.

In order to use the Github GraphQL API, you can either use the API explorer by logging in through your github account, use an api testing tool like Insomnia, or you can use it programmatically.

Since I was using the Apollo Graph QL library to query my backend - that helps me manage comments and likes, I began to do a little research on how to query the Github GraphQL API. I will link the articles below. This stack overflow answered how to add an authorization header to an Apollo Client Query.

The Query

We will be using writing our query in a node.js environment using both Apollo Client and Axios

1. Obtain your github public access token

The only permission you need for this task is public_repo under repo:

• repo
  • public_repo

Give your token a name and will look something like this:

89fdd35bcd40787b519e97462cec0f9975a66a58

Note the token above is revoked and you'll need to generate yours. Once you're done, we're ready for the next step!

2. Querying the repo

In my case, I will be looking for files in my repository called articles. If you'd like to use your own repository, simply make note of your repository name.

Using the Apollo Client

1. Install the Apollo client

   COPIED

   yarn add @apollo/client graphql

2. Working in your js file, import the Apollo client and a few methods that we will make use of:

   COPIED

   import { ApolloClient, InMemoryCache, gql, ApolloLink, HttpLink } from '@apollo/client'

3. Initialize a new apollo client with the github graphQL endpoint and your token

   COPIED

   const token = '89fdd35bcd40787b519e97462cec0f9975a66a58'
   
   const endpoint = 'https://api.github.com/graphql'
   
   // Add the toke to the header of your client for all your requests
   const githubLClient = new ApolloClient({
     uri: endpoint,
     headers: {
       authorization: `Bearer ${token}`
     },
     cache: new InMemoryCache({
       addTypename: false
     })
   })

4. Make the query I referenced github user int128's gist for the structure of the graphQl query:

   COPIED

   let request = await githubClient.query({
     query: gql`
       {
         repository(owner: "laudebugs", name: "articles") {
           defaultBranchRef {
             target {
               ... on Commit {
                 file(path: "/") {
                   type
                   object {
                     ... on Tree {
                       entries {
                         name
                         object {
                           ... on Blob {
                             text
                           }
                         }
                       }
                     }
                   }
                 }
               }
             }
           }
         }
       }
     `
   })

5. Parse your output to obtain the file's contents. By making this same query on Github's GraphQL explorer, the data returned, which is essentially a json object, at the time of writing this, looks like this:

   COPIED

   {
     "data": {
       "repository": {
         "defaultBranchRef": {
           "target": {
             "file": {
               "type": "tree",
               "object": {
                 "entries": [
                   {
                     "name": "QraphQL.md",
                     "object": {
                       "text": "# Exploring GraphQL\n"
                     }
                   },
                   {
                     "name": "README.md",
                     "object": {
                       "text": "# Articles"
                     }
                   }
                 ]
               }
             }
           }
         }
       }
     }
   }

   So, if to obtain the entries, we would access them by:

   COPIED

   let result = request.data.repository.defaultBranchRef.target.file.type.object.entries

Using Axios

1. Install the axios npm package

   COPIED

   npm install axios

2. Import exios into your node project:

   COPIED

   import axios from 'axios'

3. initialize an authentication object and the query string that will be attatched to your request

   COPIED

   // The Authorization in the header of the request
   const oauth = { Authorization: 'bearer ' + token }
   
   // The Query String
   const query = `
           {
             repository(owner: "laudebugs", name: "articles") {
               defaultBranchRef {
                 target {
                   ... on Commit {
                     file(path: "/") {
                       type
                       object {
                         ... on Tree {
                           entries {
                             name
                             object {
                               ... on Blob {
                                 text
                               }
                             }
                           }
                         }
                       }
                     }
                   }
                 }
               }
             }
           }
         `

4. Make the request, adding in the query and the header

   COPIED

   let request = axios.post(githubUrl, { query: query }, { headers: oauth })

5. Parse your output as above:

   COPIED

   let result = request.data.repository.defaultBranchRef.target.file.type.object.entries

Referenced articles

• Graph QL query for getting files.
• GraphQL Queries using Insomnia
• How to create a personal access token from your github account: Creating a personal access token
• Set Authorization Header with Apollo Client
• How to handle authorization header with apollo graphql? - Stack Overflow
• Get started with GitHub GraphQL API 👨‍🔬 on Dev