Flutter中GraphQL客户端的安装与设置指南

flutter graphql 设置 介绍 在上一个教程中，我们了解了在 flutter 中使用 back4app graphql 的好处。在本文中，我们将设置项目的基本框架并连接到 back4app 服务器。 目标 设置 flutter 环境 flutter graphql 设置结构 flutter graphql 连接 flutter graphql 连接重用和模式 先决条件 我们要求用户对 dart 和 flutter 有一些基本的了解； 虽然不是必要的，但 graphql 食谱将有助于理解 https //www back4app com/docs/parse graphql/graphql getting started 0 从 back4app hub 设置应用 我们需要创建一个应用，您可以按照文档进行操作： https //www back4app com/docs/get started/new parse app 我们将使用 back4app hub 设置本教程所需的类。 请访问： https //www back4app com/database/chinmay/flutter graphql 点击连接到 api 选择新创建的应用程序，然后完成！ 1 设置 flutter 设置 flutter 相对简单。我们将按照 https //flutter dev/docs/get started/install 的设置说明进行操作。 之后，我们将使用以下命令创建一个简单的 flutter 应用程序 flutter create flutter graphql setup 使用命令检查一切是否正常 flutter doctor flutter doctor , 通过运行应用程序 cd flutter graphql setup flutter run 2 安装 flutter graphql 库 为了实现这个客户端，我们将使用在第一篇文章中提到的 flutter graphql 库。 现在我们将把它添加到你的包中 pubspec yaml pubspec yaml dependencies graphql flutter ^3 0 0 3 创建一个 flutter graphql 提供者 在 graphql 中，我们不需要处理多个端点，我们只有一个单一的端点用于查询请求数据。我们将 graphql 查询发送到该端点。因此，通常我们所做的是创建一个客户端实例，该实例负责发送适当的头信息并根据我们的需要格式化查询。 我们将创建一个客户端，为此我们需要一个链接（httplink 类的实例）和一个缓存存储。我们将使用 httplink httplink 作为我们的链接，并使用 optimisticcache 进行缓存。代码将以以下方式编写： 在 https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart 中，我们将编写以下内容： 1 final httplink httplink = httplink( 2 uri 'https //parseapi back4app com/graphql', 3 headers { 4 'x parse application id' kparseapplicationid, 5 'x parse client key' kparseclientkey, 6 }, //getheaders() 7 ); 8 9 valuenotifier\<graphqlclient> client = valuenotifier( 10 graphqlclient( 11 cache optimisticcache(dataidfromobject typenamedataidfromobject), 12 link httplink, 13 ), 14 ); 15 4 使用 graphql 连接到 back4app 前往 back4app 控制面板，在“api 控制台” > “graphql 控制台”选项中： 记下： api url parse 应用 id parse 客户端 id 我们将在 https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart 中创建一个新文件，位于我们的项目的 lib lib 文件夹中。 string kparseapplicationid= ""; string kparseclientkey = ""; 5 查询数据 我们的组件将被 graphqlprovider 小部件包装，它将提供小部件所需的必要细节。 我们需要提供在第 2 步中创建的客户端实例。 我们将使用 graphql 控制台来编写我们的查询。您可以在我们的 https //www back4app com/docs/parse graphql/graphql getting started 1 import 'package\ graphql flutter/graphql flutter dart'; 2 import 'constants dart'; 3 4 class myhomepagestate extends state\<myhomepage> { 5 string name; 6 string saveformat; 7 string objectid; 8 9 string query = ''' 10 query findlanguages{ 11 languages{ 12 count, 13 edges{ 14 node{ 15 name, 16 saveformat 17 } 18 } 19 } 20 } 21 '''; 22 23 @override 24 widget build(buildcontext context) { 25 return safearea( 26 child scaffold( 27 appbar appbar( 28 title text( 29 'parsing data using graphql', 30 ), 31 ), 32 body query( 33 options queryoptions( 34 documentnode gql(query), 35 ), 36 builder ( 37 queryresult result, { 38 refetch refetch, 39 fetchmore fetchmore, 40 }) { 41 if (result data == null) { //check if data is loading 42 return center( 43 child text( 44 "loading ", 45 style textstyle(fontsize 20 0), 46 )); 47 } 48 //to implement rendering logic 49 }, 50 ), 51 ), 52 ); 53 } 54 } 6 渲染列表 我们将使用 listview listview 小部件来渲染列表，在 https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart 1 else { 2 return listview\ builder( 3 itembuilder (buildcontext context, int index) { 4 return listtile( 5 title text(result data\["programminglanguages"]\["edges"]\[index]\["node"]\['name']), 6 trailing text( 7 result data\["programminglanguages"]\["edges"]\[index] 8 \["node"]\['stronglytyped'] ? "strongly typed" "weekly typed" 9 ), 10 ); 11 }, 12 itemcount result data\["programminglanguages"]\["edges"] length, 13 ); 14 } 15 我们应该在屏幕上看到以下内容 结论 我们已经配置了flutter graphql客户端并连接到back4app graphql api。 您可以在这里找到相同的代码 https //github com/templates back4app/flutter graphql/tree/flutter graphql setup