Gatsby Starters & Templates Logo Gatsby Starters & Templates
Gatsby Starter Github Api screenshot

Gatsby Starter Github Api

Author Avatar Theme by Lundgren2
Updated: 4 Apr 2022
16 Stars

Kick off your next, great Gatsby project with this Github source starter based on gatsby-source-github-api

Github

Categories

React

Overview:

This content is a guide explaining how to use the gatsby-source-graphql package to source data from GitHub’s GraphQL API v4. It provides step-by-step instructions on how to install the package, generate a GitHub API token, modify the GitHub query, and deploy the site to Netlify. The guide also mentions the use of the GraphQL Explorer and provides a link to a demo site.

Features:

  • Sourcing data from GitHub GraphQL API v4: The guide explains how to use the gatsby-source-graphql package to retrieve data from GitHub’s GraphQL API v4.
  • Installation: The guide provides instructions on creating a Gatsby site, installing the gatsby-source-graphql package, and generating a GitHub API token.
  • Modifying the GitHub query: The guide explains how to modify the GitHub query according to the user’s preferences.
  • Deployment to Netlify: The guide includes instructions on how to deploy the Gatsby site to Netlify.
  • GraphQL Explorer: The guide mentions the use of the GraphQL Explorer for querying data.
  • Demo: The guide provides a link to a demo site showcasing the use of gatsby-source-graphql package.
  • Credits: The guide credits the gatsby-source-graphql package and mentions the use of GitHub buttons.

Installation:

To use the gatsby-source-graphql package for sourcing data from GitHub’s GraphQL API v4, follow these steps:

  1. Create a new Gatsby site using the Gatsby CLI:
$ gatsby new my-portfolio

  1. Generate a GitHub API token by following the instructions provided here.

  2. Add the generated token to your .env file.

  3. Modify the configuration according to your preferences. The configuration file is located at config/site.js.

  4. Open the source code of your Gatsby site and navigate to the src/pages/index.js file.

  5. Made desired changes to the src/pages/index.js file and save your changes. The browser will update in real time.

  6. Your site is now running at http://localhost:8000. Additionally, you can also access the GraphQL tool at http://localhost:8000/___graphql to experiment with querying your data.

Summary:

This guide provides step-by-step instructions on how to use the gatsby-source-graphql package to source data from GitHub’s GraphQL API v4. It covers the installation process, generating a GitHub API token, modifying the GitHub query, and deploying the site to Netlify. The guide also mentions the use of the GraphQL Explorer for querying data and provides a link to a demo site.