Flutter GraphQL与状态管理插件graphql_flutter_bloc的使用

当然，以下是一个关于如何在Flutter中使用GraphQL与状态管理插件graphql_flutter_bloc的示例代码。这个示例将展示如何设置一个基本的GraphQL查询，并使用Bloc模式管理状态。

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0
  graphql_flutter: ^5.0.0
  graphql: ^5.0.0

然后，运行flutter pub get来安装这些依赖项。

1. 定义GraphQL查询

创建一个文件queries.dart来定义你的GraphQL查询：

import 'package:graphql/client.dart';

final String getUserDataQuery = r'''
  query GetUserData($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
''';

class GetUserDataOptions extends QueryOptions {
  GetUserDataOptions({required String id}) : super(
    variables: {'id': id},
    document: gql(getUserDataQuery),
  );
}

2. 创建Bloc和事件/状态

接下来，创建一个Bloc来处理GraphQL查询的状态。我们将创建三个文件：user_event.dart、user_state.dart和user_bloc.dart。

user_event.dart

part of 'user_bloc.dart';

abstract class UserEvent {}

class FetchUserData extends UserEvent {
  final String userId;
  FetchUserData({required this.userId});
}

user_state.dart

part of 'user_bloc.dart';

class UserState {
  final bool isLoading;
  final UserData? userData;
  final String? errorMessage;

  UserState({
    required this.isLoading,
    this.userData,
    this.errorMessage,
  });

  factory UserState.initial() => UserState(
    isLoading: false,
    userData: null,
    errorMessage: null,
  );

  factory UserState.loading() => UserState(
    isLoading: true,
    userData: null,
    errorMessage: null,
  );

  factory UserState.error(String errorMessage) => UserState(
    isLoading: false,
    userData: null,
    errorMessage: errorMessage,
  );

  factory UserState.loaded(UserData userData) => UserState(
    isLoading: false,
    userData: userData,
    errorMessage: null,
  );
}

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

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

  factory UserData.fromJson(Map<String, dynamic> json) {
    return UserData(
      id: json['id'] as String,
      name: json['name'] as String,
      email: json['email'] as String,
    );
  }
}

user_bloc.dart

import 'dart:async';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'queries.dart';
import 'user_event.dart';
import 'user_state.dart';

part 'user_event.dart';
part 'user_state.dart';

class UserBloc extends Bloc<UserEvent, UserState> {
  final ValueNotifier<GraphQLClient> client;

  UserBloc({required this.client}) : super(UserState.initial()) {
    on<FetchUserData>((event, emit) async {
      emit(UserState.loading());
      try {
        final result = await client.value.query(GetUserDataOptions(id: event.userId));
        if (result.hasException) {
          throw result.exception!;
        }
        emit(UserState.loaded(UserData.fromJson(result.data!['user'] as Map<String, dynamic>)));
      } catch (e) {
        emit(UserState.error(e.toString()));
      }
    });
  }
}

3. 设置GraphQL客户端

在你的主文件（例如main.dart）中设置GraphQL客户端，并提供BlocProvider：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'queries.dart';
import 'user_bloc.dart';

void main() {
  final HttpLink httpLink = HttpLink(
    uri: 'https://your-graphql-endpoint.com/graphql',
  );

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

  runApp(
    MultiProvider(
      providers: [
        Provider.value(value: client),
        BlocProvider(
          create: (context) => UserBloc(client: client),
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserScreen(),
    );
  }
}

4. 创建用户界面

最后，创建一个用户界面来展示用户数据，并触发GraphQL查询。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'user_bloc.dart';

class UserScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Data')),
      body: Center(
        child: BlocConsumer<UserBloc, UserState>(
          listener: (context, state) {},
          builder: (context, state) {
            if (state.isLoading) {
              return CircularProgressIndicator();
            } else if (state.errorMessage != null) {
              return Text('Error: ${state.errorMessage!}');
            } else if (state.userData != null) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('ID: ${state.userData!.id}'),
                  Text('Name: ${state.userData!.name}'),
                  Text('Email: ${state.userData!.email}'),
                ],
              );
            } else {
              return ElevatedButton(
                onPressed: () {
                  context.read<UserBloc>().add(FetchUserData(userId: '1')); // Replace with actual user ID
                },
                child: Text('Fetch User Data'),
              );
            }
          },
        ),
      ),
    );
  }
}

这个示例展示了如何使用graphql_flutter和flutter_bloc库在Flutter应用中执行GraphQL查询并管理状态。你可以根据自己的需求进一步扩展和修改这个示例。