See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub

gatsby-source-helix

Gatsby source plugin for building websites using Twitch as a data source.

Installation

npm install --save gatsby-source-helix

Usage

  1. Register an app at the Twitch Dev Console and get your Client ID and Client Secret.
  2. Obtain the user ID for filtering. There are multiple ways of doing this. See Getting Your User ID.
  3. Add the plugin to your gatsby-config.js:
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-helix',
      options: {
        clientId: 'Your Client ID',
        clientSecret: 'Your Client Secret',
        userId: 'Your user ID',
      },
    },
  ],
};
  1. Query for nodes from your pages:
{
  allHelixClip {
    edges {
      node {
        title
        broadcaster_name
      }
    }
  }
}
{
  allHelixVideo {
    edges {
      node {
        title
        user_name
        description
      }
    }
  }
}

A list of available fields can be found here. Note that the id field is assigned by the plugin and does not correspond to a Twitch ID.

Getting Your User ID

This can be done using the Twitch CLI. Follow the instructions provided by Twitch, and then run the following:

twitch api get users -q login=<username>

replacing <username> with the actual name of the user whose ID you want to fetch. The JSON response will contain the user ID:

{
  "data": [
    {
      ...
      "id": "123456789",
      ...
    }
  ]
}

Options

Name Type Description Default
clientId String Twitch API Client ID (required)
clientSecret String Twitch API Client Secret (required)
userId String User ID filter (required)
© 2022 Gatsby, Inc.