前言
Syncano 是一个即服务（BaaS）平台，可以帮助开发人员快速构建和部署云应用程序。Syncano-Gatsby 是 Syncano 官方支持的 GatsbyJS 的插件，可以帮助开发人员快速构建静态网站和应用程序。
本篇文章将介绍 npm 包 syncano-gatsby 的基本使用和常见问题解决方案，希望对前端开发者有所帮助。
安装
使用 npm 安装 syncano-gatsby:
--- - ------ --------------
使用
配置
首先，需要在 Syncano 中创建一个实例。在实例的设置中，需要设置一个密钥，用于在应用程序中进行身份验证。
然后，在 Gatsby 应用程序的 gatsby-config.js 文件中添加以下代码:
-------------- - -
-------- -
-
-------- -----------------
-------- -
------------- ---------------------
------- --------------
-
-
-
-将 YOUR_INSTANCE_NAME 和 YOUR_API_KEY 替换为您的 Syncano 实例名称和 API 密钥。
queries
Syncano-Gatsby 提供了一个 GraphQL 查询来检索您的 Syncano 数据。这个查询以 syncano 作为根查询，并且具有以下可用字段：
- allSyncanoPosts: 返回所有 Syncano 中的所有帖子。
- syncanoPost: 根据 slug 返回特定的 Syncano 帖子。
要在 Gatsby 应用程序中使用这些查询，需要导入 graphql 和 useStaticQuery。然后在您的组件中使用一个 graphql 查询，并将数据作为 props 传递给您的组件。
例如：
------ ----- ---- --------
------ - -------- -------------- - ---- ---------
----- ----------- - -- ---- -- -- -
-----
---------------------
---------------------
------
--
------ ------- -- -- -
----- ---- - -----------------------
-
------- -
----------------- - --- --------- -- -
-----
-------
-
-
-
---
------ ------------ ------------------------------- ---
--mutations
Syncano-Gatsby 还提供了一个方便的方法来向 Syncano 发送 mutaions，这些 mutations 被转换为在 Syncano API 中可用的函数。
在您的组件中，使用 useSyncanoMutation 钩子来定义您的 mutation。此钩子返回一个具有以下字段的对象：
- loading: 如果 mutation 正在进行，则为true。
- error: 如果设置 mutation 出错，则返回。
- data: 返回从 mutation 收到的数据，并在成功时更新。
例如：
------ ----- ---- --------
------ - ------------------ - ---- -----------------
------ ------- -- -- -
----- - ------- -------- ------ ---- - - ---------------------------------
----- ------------ - ----- - -- -
-------------------
----- ----- - ------------------------------
----- ------- - --------------------------------
----- -------- ------ ------- ---
--
------ -
----- ------------------------
------ ----------- ------------ --
--------- --------------------------
------- ------------- -------------------
------
---------
------ -- -----------------------
----- -- -------------
-------
--
--在以上示例中，我们首先定义了一个名为 createPost 的 mutation。这个 mutation 实际上是一个 Syncano API 上的函数，并带有标题和内容参数。在 handleSubmit 函数中，从表单中提取标题和内容，然后使用 mutate 函数来调用 createPost 函数，并传递标题和内容作为参数。
Hooks
Syncano-Gatsby 还提供了一组应用程序级别的 React 钩子，它可以让您更轻松地访问 Syncano 数据和 API。
useSyncanoDataLoader
使用 useSyncanoDataLoader 的钩子，你可以在您的应用程序中开始加载数据，所以它们提前到任何特定的页面或组件。
例如：
------ ----- ---- --------
------ - -------------------- - ---- -----------------
----- -------- - -- -- -
----- - ------ -------- ----- - - ----------------------------------------
-- --------- -
------ ------------------
-
-- ------- -
------ -----------------------
-
------ -
-----
--------------- -- -
---- --------------
---------------------
---------------------
------
---
------
--
--
------ ------- ---------在以上示例中，我们定义了一个 HomePage 组件，并在 useSyncanoDataLoader 钩子中加载了所有 Syncano 帖子。如果正在加载数据，则每次渲染页面时向用户显示 "Loading..."，如果出现错误，则向用户显示 "error.message" 消息，否则它将显示第一个返回 Syncano 数据的所有帖子的标题与内容
useSyncanoData
useSyncanoData 钩子允许您访问从 useSyncanoDataLoader 加载的数据。
------ ----- ---- --------
------ - -------------- - ---- -----------------
----- ---- - -- ---- -- -- -
----- - ----- - - -----------------
----- ---- - --------------- -- --------- --- ------
------ -
-----
---------------------
---------------------
------
--
--
------ ------- -----在以上示例中，我们定义了一个 Post 组件。首先，我们使用 useSyncanoData 钩子来访问我们在 HomePage 中加载的所有 Syncano 帖子的数据。我们然后使用 find 方法查找我们要显示的帖子，并在页面上渲染标题与内容。
常见问题及解决方案
如何处理错误？
每个 Syncano-Gatsby 的钩子都提供了一个 error 对象，其中包含有关发生的错误的信息。在发生错误时，您可以在您的组件中对错误进行处理。
例如：
------ ----- ---- --------
------ - -------------------- - ---- -----------------
------ ------- -- -- -
----- - ----- -------- ----- - - ----------------------------------------
-- --------- -
------ ------------------
-
-- ------- -
------ -------- --- -- ----- ------- ----------
-
----- - ----- - - -------------
------ -
-----
--------------- -- -
---- --------------
---------------------
---------------------
------
---
------
--
--在以上示例中，如果在加载所有 Syncano 帖子时遇到错误，则我们将向用户显示一条错误消息。
如何处理 loading？
每个 Syncano-Gatsby 的钩子也提供了一个 loading 布尔值。在加载数据时，您可以在您的组件中对 loading 进行处理。
例如：
------ ----- ---- --------
------ - -------------------- - ---- -----------------
------ ------- -- -- -
----- - ----- -------- ----- - - ----------------------------------------
-- --------- -
------ ------------------
-
-- ------- -
------ -----------------------
-
----- - ----- - - -------------
------ -
-----
--------------- -- -
---- --------------
---------------------
---------------------
------
---
------
--
--在以上示例中，如果正在加载数据，则向用户显示 "Loading..."，否则渲染所有 Syncano 数据
结论
在本文中，我们介绍了使用 Syncano-Gatsby 的 npm 包进行构建静态网站和应用程序的一些基础。我们介绍了如何安装 Syncano-Gatsby、以及如何配置您的 Gatsby 应用程序以与 Syncano 通信，并通过使用 GraphQL 查询和 mutations 对数据进行操作。此外，我们还介绍了如何使用组件级别和应用程序级别的 React 钩子，以简化对 Syncano 数据的访问。
希望我们介绍的内容可以对您和您的 Syncano-Gatsby 应用程序有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/80010