0.2.0 • Published 3 years ago
gridsome-source-github-api v0.2.0
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.
Changelog
v0.1.0
Initial fork ofgatsby-source-github-api