Эй, разработчики 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.