使用Flutter中的ferry来实现GraphQL客户端

2 年 ago
韵, 科
2 minutes

为了对使用Flutter作为GraphQL API的感觉有所了解，我进行了简单的调查，并做了笔记。

使用的库

由于发现有相应的文件并且它们得到了积极的维护，所以我们决定采用ferry。

除了这些选项外，还有GraphQL、Flutter GraphQL、Artemis等，但在撰写本文时。

    • Stable版がNull-Safety対応していない

 

    • フェッチしたデータの型付け処理のためのコードの自動生成に対応していない

 

    動作が不安定っぽい

由于一些原因，我决定不再使用这些。

操作步骤

GraphQL的服务器

我使用了 GraphQL Faker。

按照README的指示搭建服务器，将创建一个GraphQL的端点，地址为http://localhost:9002/graphqh。

用 Flutter 开发的项目

渡轮的引进

在Flutter项目中，通过以下命令添加所需的软件包。

flutter pub add ferry
flutter pub add gql_http_link
flutter pub add -d ferry_generator
flutter pub add -d build_runner

自动生成Dart代码

将 GraphQL Faker 默认设置的数据结构模式保存为 lib/graphql/schema.graphql。

type Company {
  id: ID
  name: String
  industry: String
  employees: [Employee!] @listLength(min: 5, max: 10)
}

type Employee {
  id: ID
  firstName: String
  lastName: String
  address: String
  subordinates: [Employee!] @listLength(min: 0, max: 3)
  company: Company
}

type Query {
  employee(id: ID): Employee
  company(id: ID): Company
  allCompanies: [Company!]
}

我们将创建一个名为lib/graphql/employee.query.graphql的数据获取模式。

query GetEmployees {
    employee {
        id
    }
}

将构建设置文件命名为 build.yaml。以下是几乎与文档相同的描述。将 your_package_name 替换为项目名称。

targets:
  $default:
    sources:
      - lib/**
    builders:
      gql_build|schema_builder:
        enabled: true
      gql_build|ast_builder:
        enabled: true
      gql_build|data_builder:
        enabled: true
        options:
          schema: your_package_name|lib/schema.graphql
      gql_build|var_builder:
        enabled: true
        options:
          schema: your_package_name|lib/schema.graphql
      gql_build|serializer_builder:
        enabled: true
        options:
          schema: your_package_name|lib/schema.graphql

      ferry_generator|req_builder:
        enabled: true
        options:
          schema: your_package_name|lib/schema.graphql

执行以下命令，自动生成GraphQL客户端代码。

flutter pub run build_runner build

API实现的调用

使用自动生成的代码，创建名为lib/graphql.dart的类来调用GraphQL的API，如下所示。

class GraphQlAPIClient {
  late final Client _client;

  GraphQlAPIClient() {
    final link = HttpLink(
      'http://localhost:9002/graphql',
    );
    this._client = Client(link: link);
  }

  void listenEmployees() async {
    final request = GGetEmployeesReq();
    _client.request(request).listen((event) {
      final data = event.data;
      if (data != null) {
        print('Employee ID: ${data.employee?.id}');
      }
    });
  }
}

然后，从适当的位置调用准备好的方法。

void main() {
  final graphQlClient = GraphQlAPIClient();
  graphQlClient.listenEmployees();

  // ...
}

请注意，由于服务器指向本地主机，所以该代码只能在模拟器或仿真器中运行。

请参考

bannerAds