如何在flutter中向graphql API发送post请求

Question

我正在尝试通过开发一个简单的应用程序来学习如何将 rails 与 graphql 结合使用来创建一个 rails API，该应用程序只从数据库中检索文本（在我的例子中是引号）并将其显示在屏幕上。 我在前端和 rails 中使用 flutter，以 graphql 作为后端。 后端部分很容易创建，因为我已经掌握了一些 Rails 知识，但前端部分是我的新手，我正在尝试弄清楚如何访问我通过 flutter 创建的 graphql 查询以获取需要的数据要显示。

下面是我目前拥有的 flutter 代码（部分改编自How to build a mobile app from scratch with Flutter and may Rails? ）。

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<Quote> fetchQuote() async {
  final response =
      await http.get('http://10.0.2.2:3000/graphql?query={quote{text}}');

  if (response.statusCode == 200) {
    // If the call to the server was successful, parse the JSON.
    return Quote.fromJson(json.decode(response.body));
  } else {
    // If that call was not successful, throw an error.
    throw Exception('Failed to load quote');
  }
}

class Quote {
  final String text;

  Quote({this.text});

  factory Quote.fromJson(Map<String, dynamic> json) {
    return Quote(
      text: json['text']
    );
  }
}


void main() => runApp(MyApp(quote: fetchQuote()));

class MyApp extends StatelessWidget {
  final Future<Quote> quote;

  MyApp({this.quote});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Quote>(
            future: quote,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.text);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // By default, show a loading spinner.
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

这段代码错误的一些显而易见的原因是我自己已经发现，graphql 服务器期望在我的代码发送 get 请求时对查询进行 post 请求，但这是我的问题。 如何在flutter中为我的graphql服务器发送post请求以检索数据？ 我试图访问的查询是我的颤振代码中 '?query=' 之后的查询。

Answer 1

这也花了我一分钟的时间来弄清楚，但这是我在练习待办事项应用程序中所做的：

1 -通过 http阅读有关 graphql 发布请求的页面。 有一个部分用于GET请求以及POST 。

2 -确保你的body函数参数是正确的 json 编码（见下面的代码）。

提示：使用 Postman，您可以测试具有不同标头和授权令牌以及请求正文的 graphql 端点。 它还具有从请求生成代码的简洁功能。 查看此页面了解详细信息。 这不是 100% 准确，但这帮助我弄清楚如何正确设置请求正文的格式。 在函数post ，如果您提供 Map 作为请求的主体（并且请求内容类型是application/json ），显然您无法更改内容类型，因此 String 适合我的用例。

示例代码（使用GqlParser类对请求正文进行正确编码）：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'todo.dart';
import '../creds/creds.dart';
import 'gql_parser.dart';

const parser = GqlParser('bin/graphql');

class TodoApiException implements Exception {
  const TodoApiException(this.message);
  final String message;
}

class TodoApiClient {
  const TodoApiClient();
  static final gqlUrl = Uri.parse(Credential.gqlEndpoint);
  static final headers = {
    "x-hasura-admin-secret": Credential.gqlAdminSecret,
    "Content-Type": "application/json",
  };

  Future<List<Todo>> getTodoList(int userId) async {
    final response = await http.post(
      gqlUrl,
      headers: headers,
      body: parser.gqlRequestBody('users_todos', {'userId': userId}),
    );

    if (response.statusCode != 200) {
      throw TodoApiException('Error fetching todos for User ID $userId');
    }

    final decodedJson = jsonDecode(response.body)['data']['todos'] as List;
    var todos = <Todo>[];

    decodedJson.forEach((todo) => todos.add(Todo.fromJson(todo)));
    return todos;
  }
// ... rest of class code ommitted

根据.post()正文参数文档：

如果是字符串，则使用 [encoding] 对其进行编码并用作请求的正文。 请求的内容类型将默认为“text/plain”。

如果 [body] 是一个列表，则它被用作请求正文的字节列表。

如果 [body] 是 Map，则使用 [encoding] 将其编码为表单字段。 请求的内容类型将设置为“application/x-www-form-urlencoded”； 这不能被覆盖。

我在GqlParser类中使用以下代码简化了字符串的创建以作为参数的主体提供。 这将让你有一个文件夹，例如graphql包含多个*.graphql查询/突变。 然后，您只需在需要进行简单 graphql 端点请求的其他类中使用parser ，并提供文件名（不带扩展名）。

import 'dart:convert';
import 'dart:io';

class GqlParser {
  /// provide the path relative to of the folder containing graphql queries, with no trailing or leading "/".
  /// For example, if entire project is inside the `my_app` folder, and graphql queries are inside `bin/graphql`,
  /// use `bin/graphql` as the argument.
  const GqlParser(this.gqlFolderPath);

  final String gqlFolderPath;

  /// Provided the name of the file w/out extension, will return a string of the file contents
  String gqlToString(String fileName) {
    final pathToFile =
        '${Directory.current.path}/${gqlFolderPath}/${fileName}.graphql';
    final gqlFileText = File(pathToFile).readAsLinesSync().join();
    return gqlFileText;
  }

  /// Return a json-encoded string of the request body for a graphql request, given the filename (without extension)
  String gqlRequestBody(String gqlFileName, Map<String, dynamic> variables) {
    final body = {
      "query": this.gqlToString(gqlFileName),
      "variables": variables
    };
    return jsonEncode(body);
  }
}