在前端开发中，经常需要连接到一个店铺，获取商品和交易数据。对于 Shopify 平台而言，gatsy-plugin-shopify-buy 是一个非常有用的 npm 包。它可以方便地通过 GraphQL 查询在 Shopify 商店中找到需要的数据。
本篇文章将介绍如何使用 gatsby-plugin-shopify-buy，在购物网站的前端页面中与 Shopify 对接。 我们将讲解如何安装和配置该 npm 包，如何与 Shopify 建立连接，并编写一个小示例，以参考该插件的完整工作效果。
安装
使用 npm 包管理器全局安装 Gatsby CLI，使用以下命令：
npm install -g gatsby-cli
安装完毕后，创建 Gatsby 项目：
gatsby new my-shopify-project https://github.com/gatsbyjs/gatsby-starter-default
然后，安装 gatsby-plugin-shopify-buy：
npm install gatsby-plugin-shopify-buy
由于 shopify-buy 并不是 Gatsby 的插件，这个插件并未在 gatsby-plugin-中标记为" official"，请确保在gatsby-config.js中手动添加此插件以启用它：
-- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
--------- -----------------------
------- ---------------------------
----------- ---------
-
-
-
--在上述解决方案中，是需要设置以下三个选项：
"storeUrl": 你要连接到的 Shopify 存储的 URL；"apiKey": Shopify Buy API 的生成密钥。(关于如何生成 Shopify Buy API 的密钥，请参考这里。)"apiVersion": API 版本的日期字符串，例如 2020-10。
注意：如果在插件配置中定义了
"storeUrl"，则需要在 Shopify 后台中启用 Storefront API，以便插件能够访问数据。
查询数据
使用 gatsby-plugin-shopify-buy，我们可以使用 GraphQL 查询获取 Shopify 店铺中的数据。 例如，下面的查询可用于从 Shopify Store 获取所有商品数据：
-- -------------------- ---- -------
----- -
----------------- -
----- -
---- -
--
-----
-----------
------ -
-----------
-------
-
-
-
-
-如果要筛选结果并仅返回具有特定标记的商品：
-- -------------------- ---- -------
----- -
------------------------- - ----- - --- -------- ------- - -- -
----- -
---- -
--
-----
-----------
------ -
-----------
-------
-
-
-
-
-注意：
gatsby-plugin-shopify-buy将 GraphQL 数据添加到了 Gatsby 中
使用示例代码
在上方我们已经了解了如何使用 GraphQL 获取 Shopify 店铺中的商品数据。接下来，我们可以使用这些代码作为页面组件中的 props 进行渲染展示。
以下是一个基本的 React 页面，这个页面可以将 Shopify 商店结果存储在本地数组中，然后将这些结果映射到一个商品网格中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ------- - ---- ---------
------ --- ---- ---------------
------ --------- ---- -------------
----- ------------ - -- -- -
------ -
------------
---------------
----- ------------ -
----------------- -
----- -
---- -
--
-----
-----------
------ -
--
--------- -
--------------- -
----- -
------------------------
-
-
-
-
-
-
-
-
--
------------ -- -
----- -------- - -----------------------------
------ -
---- ---------------------
--------------------- -- -
---- --------------------- --------------------
---- -------------------------------------------------------------- --
-----------------------------
---------------------------------
---------------------------------- - - - - ------------------------------------------------------------------------
------
---
------
--
--
--
--
--
------ ------- -------------使用下面的组件进行调用：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------------------
------ ------------ ---- ------------------------------
----- --------- - -- -- -
------ -
--------
------------- --
---------
--
--
------ ------- ----------这种方法可以生成一个漂亮的 Shopify 商店，而无需任何服务器端代码。只要有访问 Shopify 的密钥并且启用了 Storefront API，就可以轻松地访问每个 Shopify 网站中的商品和交易数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b36763