Gatsby 是一款很不错的静态网站生成器，而 Shopify 是一款著名的电商平台。为了让这两者更好的结合起来，我们需要借助像 gatsby-source-shopify-storefront 这样的 npm 包。本文将详细介绍如何安装和使用这个 npm 包。
准备工作
首先，你需要注册一个 Shopify 帐号，并添加一些商品和货架。同时，你还需要确定你所使用的 Gatsby 版本，因为不同的版本需要使用不同的 gatsby-source-shopify-storefront 版本。例如，如果你使用的 Gatsby 版本为 2.x，则需要使用 gatsby-source-shopify-storefront@1.x。
安装 gatsby-source-shopify-storefront
打开终端，切换到你的 Gatsby 项目目录，并运行以下命令来安装 gatsby-source-shopify-storefront：
npm install --save gatsby-source-shopify-storefront
配置 gatsby-source-shopify-storefront
接下来，我们需要配置 gatsby-source-shopify-storefront 插件，它将加载你的 Shopify 店铺数据。在你的 Gatsby 项目根目录下创建一个名为 gatsby-config.js 的文件，并将以下代码添加到它的导出对象中：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- -----------------------------------
-------- -
--------- -----------------------------------------------
---------------------- -------------------------------------------
--------------- -----
--
--
--
-其中，storeUrl 是你的 Shopify 店铺地址，storefrontAccessToken 是你的客户访问令牌，你可以在 Shopify 商家后台创建它。downloadImages 选项表示是否下载图片到本地。
查询 Shopify 数据
现在，我们已经成功加载了 Shopify 数据，接下来就是查询这些数据并在网站上显示它们。在你的 Gatsby 项目中创建 GraphQL 查询文件（例如，src/pages/index.js），并使用如下代码进行查询：
-- -------------------- ---- -------
----- ------------------ -
----------------- -
----- -
---- -
--
-----
-----------
-------- -
-----
-
------ -
--------- -
--------------- -
------------ ---- -
------------------------
-
-
-
-
-
-
-
-上述查询返回你 Shopify 店铺中所有商品的 id、标题、描述、变体和图片信息。这里需要注意，“GatsbyImageSharpFixed” 是指 gatsby-transformer-sharp 插件，必须在 gatsby-config.js 文件中同时安装并配置。
在页面中展示数据
现在已经成功查询到 Shopify 数据，下一步就是将它们展示在网页上，这里我将演示如何使用 React 组件来展示它们。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ --- ---- --------------
------ ------- -- ---- -- -- -
-----
----------- -------------
----
------------------------------------ ---- -- -- -
--- --------------
---------------------
-----------------------------
----
-------------------------- -- -
--- -------------------------------------
---
-----
---- ------------------------------------------------------ --
-----
---
-----
------
-
------ ----- ----- - --------
----- ------------------ -
----------------- -
----- -
---- -
--
-----
-----------
-------- -
--
-----
-
------ -
--------- -
--------------- -
------------ ---- -
------------------------
-
-
-
-
-
-
-
-
-上述代码中，我们首先导入了 React、graphql 和 Gatsby Image，并定义了一个无状态组件，它会渲染所有的 Shopify 商品数据。接着，我们使用 GraphQL 的 data.allShopifyProduct.edges 对象遍历了所有的商品，展示了每个商品的标题、描述、价格和图片。
结论
希望这篇文章为你的 Gatsby 和 Shopify 集成提供了帮助。gatsy-source-shopify-storefront npm 包提供了非常方便的途径来将数据集成到 Gatsby 网站中。如果您遇到了任何问题，可以在 GitHub 仓库 上与作者交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2f91