在前端开发中，有时需要使用 Google Sheet 中存储的数据来展示网页内容，比如制作一个有关排名的网页。而使用 npm 包 gatsby-source-google-sheet 可以轻松地将 Google Sheet 中的数据导入到 Gatsby 的 GraphQL 查询中，从而方便地在 React 组件中使用这些数据。
安装
在使用 gatsby-source-google-sheet 之前，需要先安装 Gatsby 和 gatsby-source-google-sheet：
npm install --save gatsby gatsby-source-google-sheet
使用
使用 gatsby-source-google-sheet 的步骤如下：
- 创建一个 Google Sheet 文档，并设置为“公开可访问”。
- 生成“Google Sheets API”凭据，将其保存到项目目录中。
- 在 gatsby-config.js 中添加 gatsby-source-google-sheet 插件和相应的配置。
具体步骤如下：
1. 创建 Google Sheet 文档
打开 Google Drive 并新建一个 Google Sheet 文档。进入文档后点击“共享”按钮，将该文档设置为“公开可访问”。
2. 生成 API 凭据
进入 Google Cloud Console，选择一个项目并启用 Google Sheets API。然后生成一个“服务帐号”并下载 JSON 文件，将其保存到项目目录中。
3. 添加插件和配置
在 gatsby-config.js 中添加 gatsby-source-google-sheet 插件和相应的配置：
-- -------------------- ---- -------
-
-------- -----------------------------
-------- -
-- ---- -- --- ---- ---- ---------- --- --- ---
------------ -----------------------------------
-- --- -- -- --- ------ ----- --------
--------------- ----------------------------
-- --- ---- -- --- ----- ---------- --- ----
--------------- ----------------------------
--
--然后运行 Gatsby 开发服务器，并访问 http://localhost:8000/___graphql 打开 GraphQL 导航器，查看导入数据的情况。在 GraphQL 导航器中，可以执行以下查询：
-- -------------------- ---- -------
-
-------------- -
----- -
---- -
---------
-------
-------
-------
-
-
-
-其中 allGoogleSheet 是一个自动生成的 GraphQL 类型，可以查看所有行与列的数据。
示例代码
下面是一个简单的 React 示例组件，该组件使用 gatsby-source-google-sheet 导入 Google Sheet 中的排名数据，然后在表格中展示该数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- -------------- - ---- ---------
----- ------------ - -- ---- -- -- -
------ -
-------
-------
----
-------------
-------------
--------------
-----
--------
-------
------------------------------------- ------ -- -
--- --------------------------
---------- - -------
----------------------------
----------------------------
-----
---
--------
--------
--
--
------ ------- -- -- -
----- - -------------- - - -----------------------
-
-------------- -
----- -
---- -
---------
-------
-------
-
-
-
-
---
------ -
-----
----------------
------------- --------------------- --
------
--
--在上面的代码中，通过使用 useStaticQuery 钩子来从 GraphQL 中获取数据，然后将数据传递给 RankingTable 组件，该组件使用 map 函数将数据渲染成表格中的行数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1eb4