Flutter GraphQL转REST API请求插件graphql_2_rest的使用

GraphQL to REST

graphql_2_rest 是一个轻量级库，用于将GraphQL查询转换为REST格式，从而允许使用任何HTTP客户端执行请求。

使用方法 Usage

要有效地使用 graphql_2_rest 库，主要需要使用两个关键组件：GraphQLQueryPayload 和 GraphQLQueryBuilder。

1. GraphQLQueryPayload

GraphQLQueryPayload 负责提供将在GraphQL查询中使用的参数和输入模型。例如，如果你有如下查询：

const queryA = '''query {
  user(age: %age, firstName: %firstName) {
    first_name
    last_name
    site {
      site_name
    }
  }
}''';

const queryB = '''query {
  user(@userInput) {
    first_name
    last_name
    site {
      site_name
    }
  }
}''';

你需要创建相应的 GraphQLQueryPayload 类，并定义 arguments 或 inputs 属性来传递参数：

class UserQueryPayloadA with GraphQLQueryPayload {
  const UserQueryPayloadA(
    this.age,
    this.firstName,
  );

  final int age;
  final String firstName;

  @override
  Map<String, dynamic> get arguments {
    return {
      'age': age,
      'firstName': firstName,
    };
  }
}

class UserQueryPayloadB with GraphQLQueryPayload {
  const UserQueryPayloadB(
    this.age,
    this.firstName,
  );

  final int age;
  final String firstName;

  @override
  Map<String, Map<String, dynamic>> get inputs {
    return {
      'userInput': {
        'age': age,
        'firstName': firstName,
      },
    };
  }
}

2. GraphQLQueryBuilder

GraphQLQueryBuilder 自动替换查询中的所有参数占位符，使用由 GraphQLQueryPayload 提供的值。默认情况下，它使用以下前缀：

• % 表示参数
• @ 表示输入模型

这些默认前缀可以通过在创建类实例时指定不同的值给 argumentPrefix 和 inputPrefix 来自定义。

构建查询后，可以使用任何HTTP客户端执行请求，但请记住请求必须使用 POST 方法：

final dio = Dio(BaseOptions(baseUrl: 'https://endpoint/'));

final queryBuilder = GraphQLQueryBuilder(
  transformer: (query) => query.replaceAll(RegExp(r'\s+'), ' ').trim(),
);

dio.post<dynamic>(
  'graphql/',
  data: queryBuilder.build(
    queryA, //or queryB
    UserQueryPayloadA(27, 'John'), //or UserQueryPayloadB(27, 'John')
  ),
);

示例代码 Example

以下是一个完整的Flutter应用示例，演示如何使用 graphql_2_rest 插件与Spacex API交互获取任务名称：

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:graphql_2_rest/graphql_2_rest.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(
        title: 'GraphQL to REST Demo',
      ),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var _missionName = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('SpaceX mission name:'),
            const SizedBox(height: 8),
            Text(
              _missionName,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: _getMissionName,
              child: const Text('Get mission'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _getMissionName() async {
    const query = '''query {
      launchesPast(@limitInput) {
        mission_name
        launch_date_local
      }
    }''';

    final dio = Dio(
      BaseOptions(baseUrl: 'https://spacex-production.up.railway.app'),
    );

    final queryBuilder = GraphQLQueryBuilder(
      transformer: (query) => query.replaceAll(RegExp(r'\s+'), ' ').trim(),
    );

    final response = await dio.post<dynamic>(
      '/',
      data: queryBuilder.build(query, LaunchesPastPayload(5)),
    );

    setState(() {
      final data = response.data['data'];
      _missionName = data['launchesPast'][0]['mission_name'] as String;
    });
  }
}

class LaunchesPastPayload with GraphQLQueryPayload {
  LaunchesPastPayload(this.limit);

  final int limit;

  @override
  Map<String, Map<String, dynamic>> get inputs {
    return {
      'limitInput': {
        'limit': limit,
      },
    };
  }
}

在这个例子中，我们通过点击按钮触发 _getMissionName 方法，该方法会向 Spacex API 发送一个带有参数的GraphQL查询请求，并将返回的任务名称显示在界面上。