Twitch 是全球最大的游戏直播平台之一，提供了丰富的游戏、电竞、娱乐直播内容。为了方便开发者通过 Twitch 获取数据来开发一些有趣的应用，Twitch 提供了 GraphQL API。本文将介绍如何通过 Twitch GraphQL API 获取数据并显示数据。
1. 准备工作
在开始使用 Twitch GraphQL API 之前，需要进行以下准备工作：
注册一个 Twitch 帐户，并创建一个开发者应用，获取应用的 Client ID 和 Client Secret。
安装 Node.js，使用 npm 安装相关的 Node 模块，比如
express,graphql-request。搭建一个本地的 Web 服务器，并进行相应的配置。
2. 获取 Twitch GraphQL API 的访问凭证
在使用 Twitch GraphQL API 之前，需要先获取访问凭证。Twitch GraphQL API 使用 OAuth2 鉴权方式，需要先获取 OAuth2 的 Access Token。过程如下：
跳转至 Twitch OAuth2 授权页面：
https://id.twitch.tv/oauth2/authorize ?response_type=code &client_id={client_id} &redirect_uri={redirect_uri} &scope={scope_list} &state={state}
参数说明：
response_type：固定为codeclient_id：开发者应用的 Client IDredirect_uri：授权完成后重定向的回调 URLscope_list：授权的权限列表，可以是多个权限，用空格分隔state：授权流程中传递的状态值，可以是任意字符串
用户点击授权按钮，授权成功后跳转至
redirect_uri，并携带code和state参数。通过
http请求向 Twitch 申请 Access Token：POST https://id.twitch.tv/oauth2/token ?client_id={client_id} &client_secret={client_secret} &code={code} &grant_type=authorization_code &redirect_uri={redirect_uri}
参数说明：
client_id：开发者应用的 Client IDclient_secret：开发者应用的 Client Secretcode：从 Twitch 授权页面获取到的授权码grant_type：固定为authorization_coderedirect_uri：授权完成后重定向的回调 URL
Twitch 返回 Access Token：
{ "access_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "expires_in": 3600, "refresh_token": "yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy", "scope": ["scope1", "scope2", ...], "token_type": "bearer" }
记录下 Access Token，以便后续使用。注意 Access Token 有过期时间，需要在过期前重新申请。
3. 查询 Twitch 数据
Twitch GraphQL API 支持的查询类型有：Query, Mutation, Subscription，本文只介绍 Query 类型的查询。具体查询的字段可以参考 Twitch GraphQL API 文档。
下面以查询某个游戏的直播列表为例，介绍如何使用 Node 模块 graphql-request 查询 Twitch 数据。假设查询的游戏名称为 GameName，通过 stream 字段查询该游戏的直播列表。
创建一个 GraphQL 查询语句：
-- -------------------- ---- ------- ----- ---------------------- -------- - -------------- --- ----- ---------- - ----- - ---- - -- ----- ----------- -------------------- ------------------- ---- ------- ---- - - - -
展开代码$gameName是查询参数，需要传递游戏名称。在 Node 中发起 GraphQL 查询请求：
-- -------------------- ---- ------- ----- - -------- --- - - --------------------------- ----- --- - -------------------------------------- ----- ----- - --------- -- ------- ---- ----- ------- - - ---------------- ------- ---------------- ------------ --------- -- ----- --------- - - --------- ----------- -- ----- ---- - ----- ------------ ------ ---------- --------- -- -- ------- ----
展开代码accessToken是上一步获取到的 Access Token，clientId是开发者应用的 Client ID。注意请求头中需要携带
Authorization和Client-Id，以便 Twitch 对该查询进行鉴权。variables是查询参数，注意命名与查询语句中定义的$gameName一致。request是graphql-request模块提供的方法，用于发起 GraphQL 查询请求。注意该方法返回一个 Promise，需要使用await等待异步结果。处理查询结果并显示数据：
-- -------------------- ---- ------- ----- --- - ---------- ------------------- ----- ----- ---- -- - ----- - ---- - - ----- ------------ ------ ---------- --------- ----- ------- - ----------------------------- -- ----------- -- ---------------- ------------------ --- ---------------- -- -- - ---------------------- -- ------------------------ ---
展开代码将
streams数组作为响应发送给前端页面即可。根据具体需求，可以将数据进行进一步的处理和过滤，以便更好地展示数据。
4. 小结
本文介绍了如何通过 Twitch GraphQL API 获取数据并显示数据，需要进行 OAuth2 授权，查询 GraphQL 数据并处理数据。通过本文的学习，可以掌握如何使用 Twitch GraphQL API，并可以基于此进行二次开发。
5. 示例代码
以下是完整的示例代码，供读者参考：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - -------- --- - - --------------------------- ----- --- - -------------------------------------- ----- -------- - ----------------------------------- -- ------ ------ -- ----- ------------ - ----------------------------------- -- ------ ------ ------ ----- ----------- - --------------------------------- -- ----------- --- ----- --- - ---------- -- ---- ----------------- ----- ---- -- - ----- ------- - --------------------------------------- - --------------------- - ------------------------ - ------------------------------ - ------------------- ---------------------- --- -- ------ -------------------- ----- ----- ---- -- - ----- - ---- - - ---------- ----- ----------- - ----- --------------------- ----- - ---- - - ----- ------------------------- ------------ ----- ------- - ----------------------------- -- ----------- ------------------ --- -- -- ------ ----- ----- -------- -------------------- - ----- -------- - ----- ------------------------------------------ - ------- ------- ----- --- ----------------- ---------- --------- -------------- ------------- ----- ----- ----------- --------------------- ------------- ------------ --- --- ----- - ------------ - - ----- ---------------- ------ ------------- - -- -------- ----- -------- ------------------------- --------- - ----- ----- - ---- ----- ---------------------- -------- - -------------- --- ----- ---------- - ----- - ---- - -- ----- ----------- -------------------- ------------------- ---- ------- ---- - - - - -- ----- ------- - - ---------------- ------- ---------------- ------------ --------- -- ----- --------- - - --------- --------- -- ----- ---- - ----- ------------ ------ ---------- --------- ------ ----- - ---------------- -- -- - ---------------------- -- ------------------------ ---展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67929dbe504e4ea9bd666f14
