【Flutter】GraphQLClientを使ってGraphQL・Apollo ServerのAPIにアクセス

import 'dart:convert';

class User {
  final String id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) =>
      User(id: json["id"], name: json["name"], email: json["email"]);

  Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "email": email,
      };

  User userModelFromJson(String str) => User.fromJson(json.decode(str));
  String userModelToJson(User user) => json.encode(user.toJson());
}

7-2. lib/ui/components/client.dart

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

const String host = 'localhost';
final HttpLink httpLink = HttpLink('http://$host:4000');

final ValueNotifier<GraphQLClient> client =
    ValueNotifier(GraphQLClient(cache: GraphQLCache(), link: httpLink));

7-3. lib/ui/views/home.dart

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:graphql_raw/data/models/user.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const String allUsers = r'''
      query Users($published: Boolean!) {
        users(published: $published) {
          id
          name
          email
          profile {
            id
            bio
            userId
          }
          posts {
            id
            title
            content
            authorId
            published
          }
        }
      }
      ''';

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Query(
          options: QueryOptions(
              document: gql(allUsers), variables: const {'published': false}),
          builder: (QueryResult result,
              {FetchMore? fetchMore, VoidCallback? refetch}) {
            if (result.hasException) {
              return Text('Error: ${result.exception.toString()}');
            }
            if (result.isLoading) {
              return const CircularProgressIndicator();
            }
            if (result.data == null || result.data!.isEmpty) {
              return const Text('No data');
            }
            final List<User> users = result.data!['users']
                .map((user) => User.fromJson(user))
                .toList()
                .cast<User>() as List<User>;

            return ListView.builder(
                itemCount: users.length,
                itemBuilder: (context, index) => ListTile(
                      leading: const Icon(Icons.email),
                      title: Text(users[index].name),
                      subtitle: Text(users[index].email),
                    ));
          }),
    );
  }
}

7-4. lib\main.dart

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:graphql_raw/ui/components/client.dart';
import 'package:graphql_raw/ui/views/home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: CacheProvider(
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter - GraphQL Demo'),
        ),
      ),
    );
  }
}