Интеграция GraphQL и Flutter с использованием Back4App

flutter graphql на back4app введение поскольку вы здесь, изучая документацию back4app, вы знаете, что back4app — это гибкий бэкенд с низким кодом он позволяет вам взаимодействовать с вашим бэкендом несколькими способами, так, как вам нравится если хотите, вы можете использовать rest api, или вы можете напрямую использовать https //pub dev/packages/parse server sdk для flutter в этой серии учебников мы будем исследовать использование нового блестящего graphql api с flutter этот гид был написан чинмаем, https //www back4app com/partners/software development company , работающим в hybrowlabs цели получить обзор graphql; понять, как graphql и flutter сочетаются; понять инструменты flutter и библиотеки, доступные для graphql; понять общую архитектуру и ключевые концепции в приложении flutter graphql; предварительные требования мы требуем, чтобы у пользователя было базовое понимание dart и flutter; хотя это и не обязательно, кулинарная книга по graphql будет полезна для понимания https //www back4app com/docs/parse graphql/graphql getting started что такое graphql graphql — это альтернативная архитектура стандарту rest api graphql появился, когда команда facebook перестраивала свои нативные приложения с нуля и имела острую необходимость оптимизировать данные, которые они получали от бэкенда пока они рефакторили свои сервисы как набор ресурсов, они испытывали разочарование, потому что это никуда не приводило они сделали шаг назад и переосмыслили данные как взаимосвязанную графовую структуру объектов, а не изолированные ресурсы rest это значительно изменило архитектуру их приложения, и так родился graphql с тех пор как graphql был выпущен в 2015 году, он стал очень популярным и привлек много внимания, и его начали использовать такие команды, как twitter, airbnb, atlassian, github почему graphql? в hybrowlabs, https //www back4app com/partners/software development company , мы создаем современные, насыщенные данными веб и мобильные приложения мы выбрали back4app в качестве нашего сервиса бэкенда благодаря его простоте использования, оптимизации и возможностям определения схемы, которые предоставляются поверх уже отличных баз данных большую часть времени приложения, в которых мы обрабатываем данные, которые отображаются или манипулируются, не просто из одного класса back4app скорее, эти данные поступают из нескольких классов комбинация back4app и graphql позволяет нам очень легко справляться с такими сценариями при этом это позволяет нам сократить сетевой трафик до 2 3 вызовов на загрузку экрана, просто получая данные, которые нам нужны с другой стороны, облачный код, который мы определяем, легко документируется благодаря строго типизированной природе graphql это делает наш код поддерживаемым и легким для понимания кратко; вот преимущества использования graphql сетевой трафик минимизируется эффективные запросы и пакетирование запросов лучшее управление кодом строго типизированная природа приносит предсказуемость flutter и back4app graphql часто очень трудно спроектировать решение для бэкенда graphql, сочетая гибкость nosql баз данных, сохраняя при этом структуру и организацию, предоставляемую типом и схемой graphql back4app всегда имел этот структурированный схемный дизайн, и теперь graphql поднимает это на совершенно новый уровень, создавая api, понимающий семантику системы типов с другой стороны, как мы знаем, dart (на основе которого работает flutter) является строго типизированным языком да, dart очень строг в отношении безопасности типов с graphql у нас есть схема, которую можно повторно использовать на стороне клиента это значительно упрощает жизнь также знание схемы типов, которые могут быть получены в будущем, действительно помогает, так как это позволяет нам реализовать продвинутые алгоритмы кэширования и аннулирования запросов для этих данных инструментарий flutter для back4app graphql для взаимодействия с нашим graphql api мы будем использовать потрясающую https //github com/zino app/graphql flutter библиотеку итак, давайте разберемся в функциях, которые предоставляет библиотека поддержка запросов и мутаций вся схема, определенная на панели управления back4app, напрямую преобразуется в конечные точки back4app graphql и доступна либо как запросы, либо как мутации запросы позволяют нам получать вложенные данные из нескольких классов за один вызов api запросы в основном выполняются с целью получения данных, и они кэшируются back4app graphql позволяет использовать богатые методы запросов, поддерживающие геолокацию, время, регулярные выражения и функции полнотекстового поиска мутации позволяют нам выполнять вызов api, который может обновить несколько записей классов мутации в основном состоят из создания, редактирования и удаления данных следующий класс programinglanguage, который я создал на back4app при навигации в раздел graphql api для back4app вы увидите ранее иллюстрированную консоль back4app эта консоль теперь будет иметь все мутации и запросы, созданные автоматически! когда я перехожу в раздел graphql api для back4app, мы увидим ранее иллюстрированную консоль 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 минуту кэш в памяти 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 когда файл загружается, он загружается как тип file в graphql, который соответствует file в back4app в graphql автоматически мы сохранили файл в высокомасштабируемом хранилище файлов back4app, поддерживаемом aws s3 оптимистичные результаты 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 поставляется с встроенной поддержкой определения оптимистичных мутаций, что значительно упрощает реализацию этой сложной системы взаимодействия интерфейса таким образом, у нас есть очень хорошо оптимизированная база для создания современных приложений заключение в этом руководстве мы познакомили вас с некоторыми важными преимуществами использования graphql в вашем проекте flutter на back4app в следующем руководстве мы начнем работать с кодом и начнем с настройки нашего клиента flutter graphql для использования api back4app