Эй, разработчики Flutter!
Сегодня мы углубимся в мир GraphQL и Flutter. К концу этого руководства вы получите четкое представление о том, как интегрировать GraphQL с вашими приложениями Flutter.
Итак, хватайте свой любимый напиток и начнем!
1. Почему GraphQL?
Прежде чем мы перейдем к интеграции, давайте быстро коснемся того, почему вам может понадобиться использовать GraphQL:
- Гибкость: запрашивайте только те данные, которые вам нужны.
- Строгая типизация: больше не нужно гадать о типах данных.
- Одна конечная точка: попрощайтесь с несколькими конечными точками REST.
2. Настройка вашего проекта Flutter
Перво-наперво создайте новый проект Flutter:
flutter create graphql_flutter_app cd graphql_flutter_app
3. Зависимости
Добавьте необходимые зависимости в ваш pubspec.yaml
:
dependencies: flutter: sdk: flutter graphql_flutter: ^latest_version_here
Запустите flutter pub get
, чтобы установить их.
4. Настройка клиента GraphQL
Создайте новый файл graphql_client.dart
:
import 'package:flutter/material.dart'; import 'package:graphql_flutter/graphql_flutter.dart'; ValueNotifier<GraphQLClient>? clientFor({required String uri}) { final HttpLink httpLink = HttpLink(uri); final ValueNotifier<GraphQLClient> client = ValueNotifier<GraphQLClient>( GraphQLClient( link: httpLink, cache: GraphQLCache(store: InMemoryStore()), ), ); return client; }
5. Оберните свое приложение
В вашем main.dart
оберните свое приложение GraphQLProvider
и CacheProvider
:
import 'package:graphql_flutter/graphql_flutter.dart'; import 'graphql_client.dart'; void main() { final client = clientFor(uri: 'https://your-graphql-endpoint.com'); runApp(MyApp(client: client!)); } class MyApp extends StatelessWidget { final ValueNotifier<GraphQLClient> client; MyApp({required this.client}); @override Widget build(BuildContext context) { return GraphQLProvider( client: client, child: CacheProvider( child: MaterialApp( title: 'GraphQL Flutter', home: HomePage(), ), ), ); } }
6. Создание запросов
Предположим, что в этом уроке мы получаем список книг. Создайте новый файл queries.dart
:
const String getBooks = r''' query GetBooks { books { title author } } ''';
7. Получение данных
В виджете HomePage
:
импортировать «пакет:graphql_flutter/graphql_flutter.dart»;
импортировать «queries.dart»;
class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('GraphQL Flutter')), body: Query( options: QueryOptions(document: gql(getBooks)), builder: (QueryResult? result, {VoidCallback? refetch, FetchMore? fetchMore}) { if (result!.hasException) { return Text(result.exception.toString()); } if (result.isLoading) { return CircularProgressIndicator(); } final books = result.data?['books']; return ListView.builder( itemCount: books?.length ?? 0, itemBuilder: (context, index) { final book = books![index]; return ListTile( title: Text(book['title']), subtitle: Text(book['author']), ); }, ); }, ), ); } }
8. Мутации
Если вы хотите изменить данные, в GraphQL есть мутации. Вот краткий пример:
const String addBook = r''' mutation AddBook($title: String!, $author: String!) { addBook(title: $title, author: $author) { title author } } '''; // In your widget: Mutation( options: MutationOptions(document: gql(addBook)), builder: (RunMutation runMutation, QueryResult? result) { return ElevatedButton( onPressed: () { runMutation({'title': 'New Book', 'author': 'John Doe'}); }, child: Text('Add Book'), ); }, );
9. Заключение
И вот оно! Краткое комплексное руководство по интеграции GraphQL с Flutter. Благодаря гибкости GraphQL и простоте использования Flutter вы теперь можете создавать мощные приложения с оптимизированным процессом получения данных.
Помните, практика ведет к совершенству. Итак, играйте, экспериментируйте и наслаждайтесь программированием! 🚀
Прежде чем мы уйдем…
Эй, спасибо, что остаешься рядом! Если этот пост вас зацепил, представьте, что будет дальше.
Я запускаю канал на YouTube, и поверьте мне, вы не захотите его пропустить. Посмотрите и, может быть, даже нажмите кнопку подписки?
Пока мы не встретимся снова, кодируйте и сохраняйте любопытство!
Есть сомнения или хотите пообщаться? Реагируйте на меня в twitter или linkedin.