董珂璠☕
·
使用GraphQL获取GitHub统计信息
💡
原文英文，约900词，阅读约需3分钟。
📝
内容提要
作者在创建个人网站时，使用GraphQL API自动显示GitHub上的固定项目。通过生成个人访问令牌并使用@octokit/graphql库，成功获取项目名称、描述、URL和语言，并在网站上实现该功能。
🎯
关键要点
-
作者希望在个人网站上自动显示GitHub上的固定项目。
-
选择使用GraphQL API而非REST API，因为GraphQL更简单易用。
-
创建个人访问令牌以获取对GitHub服务器的访问权限，确保该令牌仅具有读取权限。
-
使用@octokit/graphql库来简化GraphQL的使用，安装方法为npm i @octokit/graphql。
-
编写GraphQL查询以获取固定项目的名称、描述、URL和语言。
-
使用环境变量存储GitHub令牌，以保护其隐私。
-
使用React Hooks和异步调用来处理数据加载，确保数据在获取完成后再渲染。
❓
延伸问答
如何使用GraphQL API获取GitHub上的项目统计信息？
可以通过创建个人访问令牌并使用@octokit/graphql库来获取项目的名称、描述、URL和语言。
为什么选择GraphQL而不是REST API？
选择GraphQL是因为它更简单易用，特别是在只需获取少量数据时，效率差异不明显。
如何确保GitHub访问令牌的安全性？
应将访问令牌设置为仅具有读取权限，并使用环境变量存储以保护其隐私。
在React项目中如何使用@octokit/graphql库？
可以通过npm安装@octokit/graphql库，并在项目中编写GraphQL查询来获取所需数据。
如何在React中处理数据加载和渲染？
使用React Hooks和异步调用来处理数据加载，确保数据在获取完成后再渲染。
如何编写GraphQL查询以获取固定项目的信息？
可以编写查询以获取固定项目的名称、描述、URL和语言，例如使用`{ viewer { pinnedItems(first: 6, types: REPOSITORY) { nodes { ... } } } }`。
➡️
