gridsome-source-github-api

Gridsome plugin for GitHub v4 API

Usage no npm install needed!

<script type="module">
  import gridsomeSourceGithubApi from 'https://cdn.skypack.dev/gridsome-source-github-api';
</script>

README

gridsome-source-github-api

Source plugin for pulling data into Gridsome from the official GitHub v4 GraphQL API.

Based on gatsby-source-github-api.

Install

npm i gridsome-source-github-api

How to use

Follow GitHub's guide how to generate a token.

Once you are done, either create a gridsome-config.js file or open the one you already have.

In there, you want to add this plugin and at least add the token in the options object:

// In your gridsome-config.js
plugins: [
  {
    use: `gridsome-source-github-api`,
    options: {
      // token: required by the GitHub API
      token: someString,

      // GraphQLquery: defaults to a search query
      graphQLQuery: anotherString,

      // variables: defaults to variables needed for a search query
      variables: someObject
    }
  }
];

Examples

Search query:

// In your gridsome-config.js
plugins: [
  {
    use: `gridsome-source-github-api`,
    options: {
      token: "hunter2",
      variables: {
        q: "author:lindsaykwardell state:closed type:pr sort:comments",
        nFirst: 2
      }
    }
  }
];

resulting API call:

  query ($nFirst: Int, $q: String) {
    search(query: "${q}", type: ISSUE, first: ${nFirst}){
      edges{
        node{
          ... on PullRequest{
            title
          }
        }
      }
    }
  }

Custom GraphQL query:

// In your gridsome-config.js
plugins: [
  {
    resolve: `gridsome-source-github-api`,
    options: {
      token: "hunter2",
      variables: {},
      graphQLQuery: `
        query {
          repository(owner:"torvalds",name:"linux"){
            description
          }
        }
        `
    }
  }
];

resulting API call:

query {
  repository(owner: "torvalds", name: "linux") {
    description
  }
}

The data fetched from this plugin is added to your GraphQL metadata under githubData. For example:

query {
  metadata {
    githubData{
      user {
        name
      }
    }
  }
}

Tips and Tricks

You'll probably want to use valid GraphQL queries. To help you, GitHub has a Query Explorer with auto-completion.

Query Explorer

Changelog

  • v0.1.0 Initial fork of gatsby-source-github-api