Настройка клиента GraphQL: интеграция Flutter и Back4app

настройка flutter graphql введение в последнем уроке мы поняли преимущества использования back4app graphql с flutter в этой статье мы настроим базовую структуру проекта и подключимся к серверу 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 подключение к back4app с использованием graphql перейдите в панель управления back4app в разделе “api console” > “graphql console” запишите url api id приложения parse id клиента parse мы создадим новый файл https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart в lib lib папке нашего проекта string kparseapplicationid= ""; string kparseclientkey = ""; 5 запрос данных наш компонент будет обернут виджетом graphqlprovider, который предоставит необходимые детали для виджета нам нужно будет предоставить экземпляр клиента, который мы создали на шаге 2 мы будем использовать консоль graphql, чтобы написать наш запрос вы можете узнать больше о запросах 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 и подключились к api graphql back4app вы можете найти код для этого здесь https //github com/templates back4app/flutter graphql/tree/flutter graphql setup