Как использовать GraphQL с Flutter?

Ресурсы GraphQL:
https://graphql.org/
https://www.howtographql.com

GraphQL разработан, чтобы удовлетворить потребность в большей гибкости и эффективности! Он устраняет многие недостатки и недостатки, с которыми сталкиваются разработчики при взаимодействии с REST API.

GraphQL вместо REST, почему?

Избыточное получение: Чрезмерная выборка — это выборка слишком большого количества данных, т. е. в ответе есть данные, которые вы не используете.

Под получением: Неполная выборка — это недостаточное количество данных при вызове конечной точки, что приводит к вызову второй конечной точки. В обоих случаях это проблемы с производительностью: вы либо используете больше пропускной способности, чем должны, либо делаете больше HTTP-запросов, чем должны.

Давайте используем GraphQL во флаттере на примере:
Мы собираемся получить и отобразить список стран с названием, валютой и эмодзи флага, используя

Добавьте эту зависимость, чтобы установить библиотеку GraphQL-Flutter.

dependencies:
  graphql_flutter: ^1.0.0

main.dart вашего флаттер-приложения:

import 'package:flutter/material.dart';
import 'package:graphql_demo/country_list.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  	/// HttpLink - A system of modular components for GraphQL networking.
    final HttpLink httpLink =
        HttpLink(uri: '');
  
    final ValueNotifier<GraphQLClient> client = ValueNotifier<GraphQLClient>(
      GraphQLClient(
        link: httpLink as Link,
        cache: OptimisticCache(
          dataIdFromObject: typenameDataIdFromObject,
        ),
      ),
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GraphQLProvider(
        child: CountryListView(),
        client: client,
      ),
    );
  }
}

country_list.dart

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class CountryListView extends StatelessWidget {
  final String query = '''
                      query ReadCountries {
                          countries {
                            code
                            name
                            currency
                            emoji
                          }
                      }
                  ''';
                  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List of Countries'),
      ),
      body: Query(
        options: QueryOptions(document: query),
        builder: (QueryResult result, {VoidCallback refetch}) {
          if (result.loading) {
            return Center(child: CircularProgressIndicator());
          }

          if (result.data == null) {
            return Center(child: Text('Countries not found.'));
          }

          return _countriesView(result);
        },
      ),
    );
  }
  
  ListView _countriesView(QueryResult result) {
    final countryList = result.data['countries'];
    return ListView.separated(
      itemCount: countryList.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(countryList[index]['name']),
          subtitle: Text('Currency: ${countryList[index]['currency']}'),
          leading: Text(countryList[index]['emoji']),
          onTap: () {
            final snackBar = SnackBar(
                content:
                    Text('Selected Country: ${countryList[index]['name']}'));
            Scaffold.of(context).showSnackBar(snackBar);
          },
        );
      },
      separatorBuilder: (context, index) {
        return Divider();
      },
    );
  }
}

список стран.png