Flutter GraphQL服务端通信插件graphql_server2的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter GraphQL服务端通信插件graphql_server2的使用

Graphql Server 2

Pub Version (including pre-releases) Null Safety Gitter License

package:graphql_server2 是一个用于实现GraphQL服务器的基础包。你可能会更喜欢 package:angel3_graphql,这是在Dart中实现GraphQL后端最快的方法。

package:graphql_server2 不依赖于任何特定框架,因此可以在任何Dart项目中使用。

Ad-hoc Usage

实际的查询功能由 GraphQL 类处理,它接受来自 package:graphql_schema2 的模式(schema)。在大多数情况下,你将想要在一些GraphQL文本字符串上调用 parseAndExecute 方法。它返回一个 StreamMap<String, dynamic>,并且可能抛出一个 GraphQLException(它是JSON可序列化的):

try {
    var data = await graphQL.parseAndExecute(responseText);

    if (data is Stream) {
        // 处理订阅...
    } else {
        response.send({'data': data});
    }
} on GraphQLException catch(e) {
    response.send(e.toJson());
}

你可以查阅API文档以获取更多:API Document

如果你需要类似于 graphql-js 中的 graphQLHttp 功能,那么这个包不包含此功能,因为它通常特定于你使用的框架/平台。package:angel3_graphql 中的 graphQLHttp 实现是一个很好的例子:graphQLHttp source code

Subscriptions

涉及 subscription 操作的GraphQL查询可以返回一个 Stream。最终,向客户端传递订阅事件的传输方式不在GraphQL规范中指定,所以这取决于你自己。

注意,在这样的模式中:

type TodoSubscription {
    onTodo: TodoAdded!
}

type TodoAdded {
    id: ID!
    text: String!
    isComplete: Bool
}

你的Dart模式的 onTodo 解析器应该是一个包含 onTodo 键的 Map

field(
  'onTodo',
  todoAddedType,
  resolve: (_, __) {
    return someStreamOfTodos()
            .map((todo) => {'onTodo': todo});
  },
);

为了重用现有的工具(即JS客户端等),package:graphql_server2 实现了Apollo的 subscriptions-transport-ws 规范。

注意:此时,Apollo的规范与其客户端实际期望的协议严重不同步。 参见以下问题以跟踪此情况: https://github.com/apollographql/subscriptions-transport-ws/issues/551

该实现基于 package:stream_channel 构建,因此可以在任何双向传输上使用,无论是WebSockets、TCP套接字、Isolates等。

使用此包的用户预计会扩展 Server 抽象类。Server 将处理传输和通信,但再次强调,发出订阅事件取决于你的实现。

这是一个来自 package:angel3_graphqlgraphQLWS 的片段。它在一个单一请求的上下文中运行:

var channel = IOWebSocketChannel(socket);
var client = stw.RemoteClient(channel.cast<String>());
var server =
    _GraphQLWSServer(client, graphQL, req, res, keepAliveInterval);
await server.done;

请参阅 package:angel3_graphql 中的 graphQLWS 以获取一个很好的例子:graphQLWS source code

Introspection

GraphQL模式的内省允许客户端查询模式本身,并获取有关服务器预期响应的信息。GraphQL 类自动处理这一点,因此你不需要为此编写任何代码。

但是,你可以调用 reflectSchema 方法手动反射模式:API Document

Mirrors Usage

默认情况下,dart:mirrors 不是必需的,但它可以被选择性地使用。

mirrorsFieldResolver 可以从具体对象解析字段,而无需你首先将其序列化:API Document

你还可以使用 convertDartType 将具体Dart类型转换为 GraphQLType。然而,理想的选择是 package:graphql_generator2

示例代码

以下是一个完整的示例demo,展示了如何使用 graphql_server2 包创建一个简单的GraphQL服务器:

import 'package:graphql_schema2/graphql_schema2.dart';
import 'package:graphql_server2/graphql_server2.dart';
import 'package:test/test.dart';

void main() {
  test('single element', () async {
    var todoType = objectType('todo', fields: [
      field(
        'text',
        graphQLString,
        resolve: (obj, args) => obj.text,
      ),
      field(
        'completed',
        graphQLBoolean,
        resolve: (obj, args) => obj.completed,
      ),
    ]);

    var schema = graphQLSchema(
      queryType: objectType('api', fields: [
        field(
          'todos',
          listOf(todoType),
          resolve: (_, __) => [
            Todo(
              text: 'Clean your room!',
              completed: false,
            )
          ],
        ),
      ]),
    );

    var graphql = GraphQL(schema);
    var result = await graphql.parseAndExecute('{ todos { text } }');

    print(result);
    expect(result, {
      'todos': [
        {'text': 'Clean your room!'}
      ]
    });
  });
}

class Todo {
  final String? text;
  final bool? completed;

  Todo({this.text, this.completed});
}

在这个示例中,我们定义了一个简单的 Todo 类型和一个包含 todos 查询的模式。然后我们创建了一个 GraphQL 实例并执行了一个查询。最后,我们打印并验证了结果。

希望这些信息能帮助你更好地理解和使用 graphql_server2 包!如果有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter GraphQL服务端通信插件graphql_server2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GraphQL服务端通信插件graphql_server2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,使用graphql_flutter库及其相关的服务端通信插件(如graphql_server2,尽管这个名称可能不是官方的或者是一个特定的封装,但基于你的问题,我将假设它是用于与GraphQL服务端进行通信的插件)可以帮助你轻松实现与服务端的GraphQL查询和变更操作。下面是一个使用graphql_flutter库与GraphQL服务端通信的示例代码,请注意,由于graphql_server2的具体实现细节可能有所不同,以下代码将基于graphql_flutter的核心功能进行展示,你可以根据graphql_server2的文档进行相应的调整。

首先,确保你的pubspec.yaml文件中包含了必要的依赖:

dependencies:
  flutter:
    sdk: flutter
  graphql_flutter: ^x.y.z  # 替换为最新版本号

然后,你可以按照以下步骤设置GraphQL客户端并进行查询:

  1. 创建GraphQL客户端
import 'package:graphql_flutter/graphql_flutter.dart';
import 'dart:convert';

final HttpLink httpLink = HttpLink(
  'https://your-graphql-endpoint.com/graphql', // 替换为你的GraphQL服务端URL
);

final ValueNotifier<GraphQLClient> client = ValueNotifier(
  GraphQLClient(
    link: httpLink,
    cache: GraphQLCache(),
  ),
);
  1. 定义GraphQL查询
final String query = r'''
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
''';
  1. 在Flutter Widget中使用GraphQLProvider和Query组件
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('GraphQL Flutter Demo'),
          ),
          body: Center(
            child: GraphQLQuery(
              options: QueryOptions(
                document: gql(query),
                variables: <String, dynamic>{'id': '1'},
              ),
              builder: (
                QueryResult result, {
                VoidCallback? refetch,
                FetchMore fetchMore,
              }) {
                if (result.hasException) {
                  return Text(result.exception!.toString());
                }
                if (result.loading) {
                  return CircularProgressIndicator();
                }
                if (result.data != null) {
                  final user = result.data!['user'];
                  return Text('User: ${user!['name']} (${user['email']})');
                }
                return Text('No data');
              },
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们:

  • 创建了一个GraphQL客户端,配置了HTTP链接和缓存。
  • 定义了一个简单的GraphQL查询来获取用户信息。
  • 使用GraphQLProvider组件将客户端提供给整个应用。
  • 使用GraphQLQuery组件执行查询,并根据查询结果渲染UI。

如果你使用的是graphql_server2插件,并且它有特定的配置或API,你可能需要根据其文档调整上述代码中的HttpLink初始化部分或其他相关部分。不过,基本的GraphQL查询逻辑和Flutter的UI构建方式应该是相似的。确保查阅graphql_server2的官方文档以获取准确的配置和使用指南。

回到顶部