在前端开发中，引用外部的数据是非常常见的操作。而在一些需要实时更新汇率等数据的场合，我们可以利用一些第三方 API 来获取这些数据。而 gatsby-source-exchange-rates-api 则是一个可以获取实时汇率数据的 npm 包，本文将介绍它的使用教程。
什么是 gatsby-source-exchange-rates-api
gatsby-source-exchange-rates-api 是一个基于 gatsby-source 的 npm 包，它可以获取实时汇率数据并将其存储为可查询的 GraphQL 数据。
安装
安装该 npm 包非常简单，可以使用如下的命令：
npm install gatsby-source-exchange-rates-api
使用
为了使用该 npm 包，我们需要在 gatsby-config.js 中配置相关参数。以下是一个示例配置：
-- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
-
-------- -----------------------------------
-------- -
------ -------------------
----- ------
--- ------- -------
--------- ----
-
-
-
--在该配置中，我们需要提供以下信息：
- appId: 申请汇率 API 的 App ID。
- from: 汇率的起始货币。
- to: 需要查询的货币（可以是多个）。
- interval: 数据更新的时间间隔（以秒为单位）。
数据查询
在配置完成后，我们实际上已经将汇率数据存储在了 GraphQL 数据库中，接下来只需要在代码中调用即可。以下是一个示例代码：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----- ----- - --------
----- -
------------- -
----- -
---
---
-
-
-
--
----- ----------- - -- ---- -- -- -
-----
- --- - ------------------------------ ---
- --- - ------------------------------ ---
------
--在该代码中，我们调用了 GraphQL 数据库中的 exchangeRates 数据，并提取了 EUR 和 JPY 的汇率数据。需要注意的是，我们需要使用 GraphQL 的语法来进行数据的图查询。
优点
使用 gatsby-source-exchange-rates-api 的优点主要有以下几点：
- 可以方便地获取实时汇率数据。
- 通过 GraphQL 存储数据，方便进行图查询。
- 数据的更新和维护由该 npm 包进行处理，我们只需要进行简单的配置即可。
结论
通过本文的介绍，我们可以了解到如何使用 gatsby-source-exchange-rates-api 来获取实时汇率数据。该 npm 包的使用非常方便，可以为我们的前端开发提供很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f7277583806