让 Flutter app 与 GraphQL 无缝对接：打造现代新闻客户端

2023-12-28 01:17:52

使用 Flutter 和 GraphQL 构建新闻客户端

简介

在本教程中，我们将构建一个现代新闻客户端，使用 Flutter 作为前端框架，Headless Strapi 作为内容管理系统 (CMS)，并使用 GraphQL 作为 API 层。我们将重点介绍如何使用这些技术来构建一个功能齐全的新闻客户端。

前提条件

熟悉 Flutter 开发
熟悉 GraphQL 和 REST API
具有基本的后端开发经验

步骤

1. 安装 Strapi

Strapi 是一个开源的 headless CMS，它允许您轻松地创建和管理内容。

在您的服务器上安装 Strapi。
创建一个新的项目。
安装 GraphQL 插件。

2. 构建新闻数据结构

在 Strapi 中，我们将创建一个新闻数据结构。

创建一个新的内容类型，名为 "News"。
添加以下字段：
- 标题
- 内容
- 作者
- 发布日期

3. 调试 GraphQL 请求

在 Strapi 中，您可以使用 GraphQL Explorer 来调试 GraphQL 请求。

打开 GraphQL Explorer。
运行以下查询：

{
  news {
    id
    title
    content
    author
    publishedAt
  }
}

这将返回所有新闻项目。

4. 编写 Flutter 代码

在 Flutter 中，我们将创建一个简单的新闻客户端。

创建一个新的 Flutter 项目。
安装 GraphQL Flutter 包。
在您的 pubspec.yaml 文件中添加以下代码：

dependencies:
  graphql_flutter: ^5.0.0

在您的 main.dart 文件中，导入 GraphQL Flutter 包。

import 'package:graphql_flutter/graphql_flutter.dart';

创建一个 GraphQLClient 实例。

final HttpLink httpLink = HttpLink(
  uri: 'http://localhost:1337/graphql',
);

final AuthLink authLink = AuthLink(
  getToken: () async => 'Bearer ',
);

final Link link = authLink.concat(httpLink);

final GraphQLClient client = GraphQLClient(
  cache: GraphQLCache(),
  link: link,
);

创建一个查询并执行它。

final String query = '''
  query {
    news {
      id
      title
      content
      author
      publishedAt
    }
  }
''';

final QueryResult result = await client.query(QueryOptions(document: query));

在您的 UI 中显示结果。

ListView.builder(
  itemCount: result.data?['news'].length,
  itemBuilder: (context, index) {
    final newsItem = result.data?['news'][index];

    return ListTile(
      title: Text(newsItem['title']),
      subtitle: Text(newsItem['author']),
    );
  },
);