Geekly articles weekly

使用8base，GraphQL和React创建Sticky Notes应用程序

图片

在此处查看该程序的演示版本。

在任何时候，时间管理对我来说都是一个艰巨的工作，计划的任务被遗忘，笔记丢失了，因为它们分布在保存笔记的多个应用程序中。 我建议您创建个性化便笺的应用程序中根本没有该解决方案，尽管由于放入时间的缘故，您可能会使用它。

要创建笔记应用程序，我们需要一个实际上不需要开发后端的简单堆栈以及一个易于部署的应用程序。 基于这些要求，我们将为应用程序选择堆栈。 看起来像这样：
-React-用于前端开发。 这是一个用于创建用户界面的流行库，可以轻松地将其部署在Now和Netlify等多个平台上。
-8base GraphQL-我们的应用程序的数据库层。 在这里，我们将在应用程序中存储和读取请求。 使用8base，您无需为应用程序创建和维护后端。

我已经使用这些工具成功创建了一个简单的应用程序。 在本文中，我们将研究创建此应用程序并设置在8base平台上运行的后端的过程。

图片

如果您不方便使用屏幕截图，则可以随时查看演示应用程序 。 便笺随机放置在网页上，并且可以拖动到其他位置。

遵循说明需要对React和Node.js有基本的了解。 在开始之前，请确保已安装 Node和npm / yarn 。

我们还将在项目中使用GraphQL查询，因此对这种技术的一些熟悉将很有用。

8base平台提供了广泛的功能，可帮助开发人员更快，更轻松地创建应用程序。 使用8base，您可以轻松组织应用程序的后端，而无需编写代码。 使用8base平台，您可以使用简单的图形界面创建后端，该界面允许您执行以下操作：

  • 定义数据模式：创建表/表关系。
  • 上传文件。
  • 定义访问权限和授权角色。
  • 使用研讨会管理各种项目。
  • 使用API​​ Explorer（基于GraphQL）设计查询。

在本指南中，我们将了解如何使用8base来快速配置服务器端并使用GraphQL API处理数据。 我们的前端应用程序将使用React构建，并使用GraphQL与服务器交互。

要开始使用8base，请按照下列步骤操作：

1.在8base上创建一个帐户 。 它是免费的。

图片

2.注册完成后，单击“ 数据构建器”按钮转到“ 数据”页面，然后单击“新建表”以开始配置后端。

图片

3.加载新表后，您将被带到方案中，并且可以开始定义字段。 让我们注意几件事。 在左侧，您将看到系统表和您的表 。

每个新的8base工作空间都会自动带有几个内置表。 这些表用于文件，设置和权限之类的东西，并且都可以通过8base GraphQL API进行访问。

4.继续创建 Notes 表 ，该表包含以下字段：

title ：字段类型Text 。 这将是注释的标题。
text ： 文本字段的类型。 该字段将包含注释的正文。
我们的计划非常简单，用于实现我们试图实现的机会。

图片

5.然后复制端点API URL（位于左下方）-这是应用程序的客户端和服务器部分之间的通信主线。

图片

6.最后，出于本指南的目的，默认情况下，我们将允许Guest进行公共访问 ，因此不需要身份验证。 要允许来宾访问新的Notes表，请转到“设置”>“角色”>“来宾”，然后在“ Notes”部分中选中相应的框。 默认情况下，所有访问您的API端点的未授权用户都会分配来宾角色。 本指南未涵盖授权。 在这里，您可以了解有关如何使用它的更多信息。

图片

既然我们已经完成了使用8base的后端配置，那么我们将开始在应用程序的前端工作。

开始使用


我创建了一个入门项目来轻松配置和减少开销，因此本文基本上描述了如何开始使用8base和GraphQL。 已经配置了应用程序的框架，包括项目的样式和结构。 入门分支中提供以下选项：

  1. 便笺表单中用于创建便笺的组件。
  2. 笔记的组件，显示单个笔记的详细信息。
  3. 注释列表组件，显示可用注释的列表。

运行以下命令来克隆存储库：

git clone -b starter https://github.com/HackAfro/note-app.git

通过运行以下命令打开文件夹并安装项目依赖项：

 npm install

通过在项目根文件夹中的终端中运行npm start来启动React应用程序服务器。

使用GraphQL连接到8base后端


现在我们的初始前端已启动并正在运行，下一步是配置客户端以使用GraphQL与8base后端进行交互。 apollo-boost是一个有用的库，可帮助您建立连接。 它提供了客户端使用URI连接到GraphQL后端。 URI是8base提供的端点。 让我们更新index.js文件以配置ApolloClient。

 import React from "react"; import ReactDOM from "react-dom"; import { ApolloProvider } from "react-apollo"; import ApolloClient from "apollo-boost"; import * as serviceWorker from "./serviceWorker"; import "./index.css"; import App from "./App"; const client = new ApolloClient({ uri: "<YOUR_8BASE_ENDPOINT>" }); ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, document.getElementById("root") ); serviceWorker.unregister();

ApolloClient将带有uri属性的对象作为参数； 同时，客户端允许我们使用提供的uri来接收，更新和删除数据。 确保将<YOUR_8BASE_ENDPOINT>的值替换为实际的端点。

然后，将应用程序包装在ApolloProvider中，后者接受prop客户端。 ApolloProvider加载8base表架构，使您可以访问前端代码中的所有数据模型属性。

接收和显示笔记


为了从后端获取笔记，我们将编写一个GraphQL查询来接收存储在8base中的笔记。 让我们开始更新App.js文件。

将以下导入添加到找到TODO的位置-1条注释：

 import gql from "graphql-tag"; import { graphql } from "react-apollo";

它们对于创建GraphQL查询以及将道具发送到App组件做笔记很有用。 接下来，我们需要添加一个从服务器端接收注释的请求。 更新NOTE_LIST_QUERY，使其看起来像下面的代码片段：

 const NOTE_LIST_QUERY = gql` query { notesList { items { id title text } } } `;

如果您不确定自己的要求，可以随时在8base API Explorer中对其进行测试。 让我们检查一下上面的查询。

如果在资源管理器中执行此查询，则很可能会返回一个空数组，因为未创建任何注释。 我们可以使用8base工具栏轻松创建笔记。 按照侧栏中的数据链接，并按照下面的屏幕快照中的说明进行操作：

图片

我们将从notesList元素获取id ， title和text 。 接下来，我们将准备App组件，以使用从请求中收到的注释。 最后，我们将使用graphql HOC （高阶组件）将查询与App组件相关联。 该函数接受查询字符串和配置参数。
// TODO-3

  export default graphql(NOTE_LIST_QUERY, { props: (result) => { const { data } = result; const { loading, refetch } = data; let notes = []; if (data && data.notesList) notes = data.notesList.items; return { loading, notes, refetch, }; }, })(App);

在TODO-上面的3条注释下替换现有的出口行。

graphql函数返回一个“增强器”函数，该函数将使用GraphQL功能扩展传递给它的任何组件。 这对应于响应函数中的连接功能也使用的高阶组件模式。

使用graphql()函数，我们可以访问GraphQL端点。 它接受查询作为第一个参数（NOTE_LIST_QUERY），第二个作为配置，返回值为HOC，应使用所需的组件作为参数来执行。 在片段中，我们将data.noteList属性的值传递data.noteList新的变量notes。 通过返回此值，我们可以在组件内部以props.notes对其进行访问，并以props.notes的形式进行下载。

refetch方法将非常有用，因此我们可以实现接近实时更新的功能。 我们将在每次突变后调用该函数，以确保应用程序中的数据始终与8base后端同步。
如果您切换到localhost：3000，则会看到刚刚创建的注释。 我们需要能够在不访问8base工具栏的情况下创建注释，这意味着移至GraphQL ...的下一个层次。 变异！

创建笔记


完成用于从后端接收笔记的设置之后，下一个逻辑步骤是添加创建笔记的功能。 初始文件包含表单组件，我们需要更新该组件以使突变能够将创建的注释保存在8base后端。

在上一节中，我们执行了从后端接收笔记的请求 ，在这一部分中，我们将执行变异以保存新笔记，该变异与请求相似，唯一的区别是每当需要更改数据时都会调用变异。 在8base中创建表后，可以在Explorer API中轻松访问该表的查询和变异。 因此，如果我们怀疑突变的结构如何，我们总能到达那里。

让我们看看该突变在API Explorer中创建注释的样子。 转到8base工具栏，然后单击侧栏中的API Explorer。

在API资源管理器中，点击突变链接，如上所示。 这将显示所有可用的突变。 查找负责创建注释的内容：

图片

屏幕快照显示，突变名称为noteCreate ，并且它使用一个类型为NoteCreateInput的参数。 NoteCreateInput-定义创建注释所需的请求正文的类型。

现在我们知道我们需要什么，让我们开始实施。 我照顾了您，并创建了一个用于创建便笺的表单，因此仍然可以使用graphql函数向组件添加变异。

打开src / components / note-form / index.js ，在有TODO 1注释的位置添加以下导入：

 import gql from "graphql-tag"; import { graphql } from "react-apollo";

接下来，我们将声明该突变，更新NOTE_MUTATION变量并为其分配一个新值，类似于下面的片段：

 const NOTE_MUTATION = gql` mutation NoteCreate($data: NoteCreateInput!) { noteCreate(data: $data) { id } } `;

接下来，我们使用graphql函数将突变与组件相关联。 将文件中的导出行替换为以下代码段：

 export default graphql(NOTE_MUTATION, { name: "noteCreate" })(NoteForm);

因此， graphql函数传递了命名函数noteCreate ，该函数将用于执行创建突变。 提交表单时，让我们使用noteCreate函数创建一个注释。

转到TODO 4注释并更新submit功能，使其看起来像下面的代码片段：
// TODO-4

  const submit = async note => { const res = await noteCreate({ variables: { data: note } }); if (res.data.noteCreate.id) { setNote({ title: "", text: "" }); refetch() } };

在上面的代码片段中，我们使用noteCreate函数在notes表中执行了create突变。 传递给函数的参数是一个包含变量和数据主体的对象。

我们等待直到请求完成，然后通过在响应正文中找到id来检查请求是否成功。 然后我们重置note和refetch的状态。 我在本文前面提到了refetch函数，但让我更新您的内存。 Refetch强制您的组件重复在graphql()函数中定义的查询。

现在一切准备就绪，可以进行测试。 转到localhost：3000，填写表格并享受结果。

删除笔记


如果您无法删除所有笔记并假装它们根本不存在，那么任何笔记应用程序都有什么用呢？ 删除注释的步骤：

  1. 用户单击删除按钮。
  2. 出现确认窗口-这减少了恶意用户的数量，非常有用。
  3. 仍然要采取行动-删除注释。

删除注释的设置位于src /注释卡/delete-button.js文件中。 打开文件，并在文件顶部添加以下导入。 特别是在TODO 1所在的位置：

 import gql from 'graphql-tag'; import { graphql } from 'react-apollo';

然后编写删除突变并将其分配给DELETE_MUTATION变量。 这看起来应如下所示：

 const DELETE_MUTATION = gql` mutation DeleteNote($data: NoteDeleteInput!) { noteDelete(data: $data) { success } } `;

接下来，我们使用graphql函数将突变与组件相关联。 将文件中的导出行替换为以下片段：

 export default graphql(DELETE_MUTATION, { name: 'deleteNote', })(DeleteButton);

然后， graphql函数传递命名的deleteNote函数，该函数将用于执行delete突变。 现在，我们可以更新click事件处理程序并添加急需的设置以删除注释。

转到组件中的onDeleteClick函数，将以下片段放入函数中：

 const onDeleteClick = async () => { const data = { id: noteId, }; const remove = window.confirm('Are you sure you want to delete this note?'); if (remove) { await deleteNote({ variables: { data } }); refetch(); } };

当您单击删除按钮时，在数据对象的主体中，我们将id字段设置为noteId ，然后向用户显示一条确认消息，明确表明我们打算永久删除此注释。 如果用户按照预期执行并决定继续，则调用deleteNote函数以使删除变异 。 完成后，您需要一个应用程序。

这是它的外观。 转到localhost：3000并尝试删除注释：

图片
您可以在此处找到此应用程序的演示。

结论


我相信您在创建该应用程序时过得很愉快，我们研究了如何编写查询以从8base的服务器端接收数据，以及如何编写创建和删除突变。 8base作为平台相对易于浏览，并提供直观的用户界面。 我整夜都在弄清楚。 您可以通过学习如何编写更新 突变以及添加编辑注释的功能来填补缺失的空缺。 我相信用户会满意的。 您还可以查看其官方文档以获取有关平台的更多信息。 您可以在此处找到应用程序的源代码。

Source: https://habr.com/ru/post/zh-CN463907/

More articles:


All Articles