深入了解Flutter应用中的GraphQL架构与实现

在 back4app 上使用 flutter graphql 介绍 既然你在这里深入研究 back4app 文档，你就知道 back4app 是一个灵活的低代码后端。它允许你以多种不同的方式与后端进行交互，按照你喜欢的方式。如果你愿意，可以使用 rest api，或者可以直接使用一个 https //pub dev/packages/parse server sdk 来进行 flutter 开发。在本系列教程中，我们将探索如何使用新的 graphql api 与 flutter。 本指南由 chinmay 编写，他是一个 https //www back4app com/partners/software development company ，在 hybrowlabs 工作。 目标 获取 graphql 的概述； 理解 graphql 和 flutter 如何结合在一起； 了解可用于 graphql 的 flutter 工具和库； 理解 flutter graphql 应用程序中的一般架构和关键概念； 先决条件 我们要求用户对 dart 和 flutter 有一些基本的了解； 虽然不是必要的，但 graphql 食谱将有助于理解 https //www back4app com/docs/parse graphql/graphql getting started 什么是 graphql graphql 是 rest api 标准的替代架构。graphql 诞生于 facebook 团队从头开始重建他们的原生应用程序时，他们迫切需要优化从后端接收的数据。 当他们将服务重构为一组资源时，他们感到沮丧，因为这没有带他们走向任何地方。 他们退后一步，重新思考数据作为一个相互连接的对象图，而不是孤立的 rest 资源。这对他们的应用程序架构产生了重大影响，这就是 graphql 诞生的原因。自 2015 年 graphql 发布以来，它获得了巨大的受欢迎程度和关注，并被 twitter、airbnb、atlassian、github 等团队采用。 为什么选择 graphql？ 在 hybrowlabs，一家 https //www back4app com/partners/software development company , 我们构建现代化、数据密集型的网络和移动应用程序。我们选择 back4app 作为我们的后端服务，因为它的易用性、优化和模式定义功能，这些功能是在已经很棒的数据库之上提供的。 大多数情况下，我们工程中的应用程序所显示或操作的数据不仅仅来自单个 back4app 类。相反，这些数据来自多个类。back4app graphql 组合使我们能够轻松处理这种情况。 同时，它使我们能够将每个屏幕加载的网络调用减少到 2 3 次，仅提取我们想要的数据。另一方面，我们定义的云代码由于 graphql 的强类型特性而容易被文档化。这使我们的代码可维护且易于理解。 tldr; 使用 graphql 的优势如下 网络占用最小化 高效的查询和查询批处理 更好的代码管理 强类型特性带来可预测性。 flutter 和 back4app graphql 将 nosql 数据库的灵活性与 graphql 的类型和模式结构所提供的结构和组织相结合，架构一个 graphql 后端解决方案往往非常困难。 back4app 一直以来都拥有这种结构化的基于模式的设计，而现在 graphql 通过创建一个了解类型系统语义的 api 将其提升到一个全新的水平。 另一方面，正如我们所知，dart（flutter所基于的语言）是一种强类型语言。是的，dart对类型安全非常讲究。 使用graphql，我们有一个可以在客户端重用的模式。这使生活变得容易得多。此外，了解未来可以获取的类型模式确实有助于我们在这些数据上实现高级缓存和查询失效算法。 back4app graphql的flutter工具包 为了与我们的graphql api进行交互，我们将利用这个很棒的 https //github com/zino app/graphql flutter 库。那么让我们了解一下该库提供的功能： 支持查询和变更。 在back4app仪表板上定义的所有模式都直接转换为back4app graphql端点，并作为查询或变更可用。 查询允许我们在一次api调用中从多个类获取嵌套数据。 查询主要用于数据获取，并且它们是被缓存的 back4app graphql允许丰富的查询方法，支持地理位置、时间、正则表达式和全文搜索功能。 变更允许我们进行api调用，可以更新多个类条目。 变更主要包括创建、编辑、删除数据。 以下是我在back4app上创建的programinglanguage类： 当导航到 back4app 的 api 的 graphql 部分时，您将看到之前展示的 back4app 控制台。这个控制台现在将自动创建所有的变更和查询！ 当我进入 back4app 的 api 的 graphql 部分时，我们将看到之前展示的 back4app 控制台。这个控制台现在将自动创建所有的变更和查询！ 在上面的图片中，我使用了 back4app graphql 来列出我所有的编程语言，来自 programminglanguage 类。 同样，我们可以通过利用变更在我们的 programminglanguage back4app 类中创建一个条目。 查询轮询 1 query( 2 query( 3 options queryoptions( 4 document get all programming languages, // this is the query string you just created 5 pollinterval 10, //setting up polling 6 ), 7 builder (queryresult result) { 8 if (result errors != null) { 9 return text(result errors tostring()); 10 } 11 12 if (result loading) { 13 return text('loading'); 14 } 15 16 // it can be either map or list 17 list programminglanguages = result data\['programminglanguages']; 18 19 return listview\ builder( 20 itemcount programminglanguages length, 21 itembuilder (context, index) { 22 final repository = programminglanguages\[index]; 23 return text(programminglanguages\['name']); 24 }); 25 }, 26 ); 对于某些用例，订阅可能会过于复杂。我们需要定期刷新数据，可以使用客户端的查询轮询功能。 这使我们能够以周期性的方式获取最新数据。例如，我们可以每分钟进行一次后台数据获取。 内存缓存 1 static future\<queryresult> callquery( 2 {dynamic documentnode, dynamic variables, fetchpolicy fetchpolicy}) { 3 return singleton client query( 4 queryoptions( 5 context singleton context, 6 documentnode documentnode, 7 variables variables, 8 fetchpolicy fetchpolicy ?? fetchpolicy cacheandnetwork, 9 ), 10 ); 11 } flutter graphql 客户端实现了多种数据缓存方式，它们是： 缓存时重新验证：让我们考虑一个简单的例子，获取一系列文章。我们希望在从列表移动到特定文章然后再返回时，列表数据能够被缓存。缓存时重新验证机制实现了这种查询数据的方法，这意味着即使正在进行 api 调用以获取数据，旧数据也会在新数据被获取时显示，当新数据可用时，它将被显示。 仅缓存：在这种方法中，只有在我们的设备上没有数据时才会进行网络调用。当与离线同步功能结合使用时，这种方法是值得的，适用于那些不会改变的数据点。这优化了网络并节省了资源。 仅网络：在极少数情况下，当您不想保留数据缓存时，可以使用 flutter graphql 库的仅网络模式。 离线缓存同步 移动体验期望默认启用离线功能。使用flutter和rest api来实现这一点非常繁琐。您必须将数据存储到sqlite数据库中，检查数据是否存在，编写sql查询以获取数据，然后还要进行网络调用以更新数据。 这是一项繁重的工作，使用这个插件可以完全绕过这些工作，并且查询的离线支持已经集成到我们的flutter应用程序中。 文件存储 1 mutation($files \[upload!]!) { 2 multipleupload(files $files) { 3 id 4 filename 5 mimetype 6 path 7 } 8 } 9 10 import 'package\ http/http dart'; 11 12 // 13 14 string filepath = '/aboslute/path/to/file ext'; 15 final file = await multipartfilefrom(file(filepath)); 16 17 final queryresult r = await graphqlclientclient mutate( 18 mutationoptions( 19 documentnode gql(uploadmutation), 20 variables { 21 'files' \[file], 22 }, 23 ) 24 );gr 许多graphql服务器库不支持使用graphql查询进行文件上传。为了上传文件，我们必须调用一个单独的rest端点。上传文件，获取url，然后以字符串的形式将其传递给graphql api。此外，我们还必须手动维护文件元数据，如文件名等。 back4app支持集成到back4app graphql api中的文件上传标准。当文件上传时，它作为graphql的file类型上传，这对应于graphql中的back4app file。我们自动将文件存储到由aws s3支持的高度可扩展的back4app文件存储中。 乐观结果 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) 用户已经开始期待非常吸引人的用户界面和即时反馈。乐观用户界面是一种ui/ux原则，基本上说的是我们不应该等待操作完成。而是，我们向用户展示我们已经完成了这个操作的反馈！ 这是基于这样一个假设：该操作在99%的情况下大多数会成功。如果操作不幸失败，我们会显示一条失败消息，说明我们无法完成该操作。 flutter graphql内置了对定义乐观变更的支持，这使得实现这种复杂的用户界面交互系统变得更加容易。 因此，有了这个，我们为构建现代应用程序提供了一个非常优化的基础。 结论 在本指南中，我们向您介绍了在back4app上使用graphql在flutter项目中的一些重要优势。在下一篇指南中，我们将开始编写代码，并首先设置我们的flutter graphql客户端以使用back4app api。