npm 包 gatsby-source-twitch 使用教程

在前端开发中，我们常常需要通过 API 获取数据并对其进行渲染成视图。twitch 是一款全球领先的游戏直播平台，其中包含着许多的游戏直播数据是我们获取并应用在我们的前端项目中的好素材。而 gatsby-source-twitch 正是提供了这样的数据皆美的 npm 包。本文将为大家详细介绍 gatsby-source-twitch 的安装和使用步骤。

1. 安装 gatsby-source-twitch

使用 npm 包管理器来安装 gatsby-source-twitch：

npm install --save gatsby-source-twitch

2. 配置 gatsby-config.js

在您的 gatsby-config.js 文件中, 添加以下内容:

module.exports = {
  siteMetadata: {
    title: `Twitch`,
  },
  plugins: [
    {
      resolve: `gatsby-source-twitch`,
      options: {
        username: `<username>`,
        password: `<password>`,
        clientID: `<clientID>`,
        clientSecret: `<clientSecret>`,
        channels: [`<channel_name>`],
      },
    },
  ],
};

Sensitive configuration data,如 password,可尝试将其存储在 .env 中，然后使用 process.env 访问它。

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

3. 查询 twitch 信息

在gatsby-node.js文件中，您可以执行 GraphQL 查询来检索 twitch 数据。 可以从查询中选择您想要的字段。

以下是您可以使用的一些关键字段：

 {
        allTwitchChannel {
          edges {
            node {
              title
              game {
                name
              }
              viewers
              status
              videoBanner
            }
          }
        }
 }

4. 示例代码

让我通过一个简单的示例来演示如何在 Gatsby 项目中使用 gatsby-source-twitch npm 包。

import React from "react"
import { graphql } from "gatsby"

const TwitchPage = ({ data }) => (
  <div>
    <h1>Twitch Channel List</h1>
    <ul>
      {data.allTwitchChannel.edges.map((edge, index) => (
        <li key={index}>
          <h2>{edge.node.title}</h2>
          <p>Game - {edge.node.game.name}</p>
          <p>{edge.node.viewers} Viewers</p>
          <p>Status - {edge.node.status}</p>
          <img src={edge.node.videoBanner} alt="Twitch" />
        </li>
      ))}
    </ul>
  </div>
)

export default TwitchPage

export const query = graphql`
  {
    allTwitchChannel {
      edges {
        node {
          title
          game {
            name
          }
          viewers
          status
          videoBanner
        }
      }
    }
  }
`

这个例子中，我们使用 graphql 钩子访问 twitch 数据，然后通过遍历来渲染 twitch 信息。

5. 总结

通过本文，您将学会了如何安装和使用 gatsby-source-twitch 插件从 twitch 中检索数据并在您的 Gatsby 项目中应用。这个插件不仅仅为展示 twitch 数据提供了方便，它也反映了如何从重要的 API 中提取信息并在您的项目中使用它们的能力。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/60067382890c4f72775842f5