Flutter GraphQL服务端通信插件graphql_server2的使用
Flutter GraphQL服务端通信插件graphql_server2的使用
Graphql Server 2
package:graphql_server2
是一个用于实现GraphQL服务器的基础包。你可能会更喜欢 package:angel3_graphql
,这是在Dart中实现GraphQL后端最快的方法。
package:graphql_server2
不依赖于任何特定框架,因此可以在任何Dart项目中使用。
Ad-hoc Usage
实际的查询功能由 GraphQL
类处理,它接受来自 package:graphql_schema2
的模式(schema)。在大多数情况下,你将想要在一些GraphQL文本字符串上调用 parseAndExecute
方法。它返回一个 Stream
或 Map<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_graphql
中 graphQLWS
的片段。它在一个单一请求的上下文中运行:
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
更多关于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客户端并进行查询:
- 创建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(),
),
);
- 定义GraphQL查询:
final String query = r'''
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}
''';
- 在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
的官方文档以获取准确的配置和使用指南。