Flutter数据交互插件dart_sanity_client的使用

Dart Sanity Client

如果你像我一样对找不到官方的Dart客户端感到失望，并且对pub.dev上可用的替代品感到不满，那么这个包正是为你准备的。它旨在满足大多数需求并提供一个健壮的HTTP客户端体验。你可以期望获得全面的HTTP支持，不仅包括fetch，还包括创建、编辑、删除、发布、取消发布、替换草稿和丢弃等功能。

特性

• 全面支持sanity.io的HTTP API
• 支持fetch、编辑、删除、发布、取消发布、替换草稿和丢弃sanity对象数据
• 最新的客户端配置选项，如视角和标签
• 可选的令牌用于fetch请求
• 包含文件和图像的CDN引用解码器
• urlFor()方法几乎与JS客户端一致，并支持完整的图像参数
• 支持groq和graphql

开始使用

要创建一个DartSanityClient实例，需要一个SanityConfig对象：

import 'dart:convert';
import 'package:dart_sanity_client/dart_sanity_client.dart';

// 使用最少的凭据初始化客户端以访问公共数据集
final client = DartSanityClient(
  SanityConfig({
    dataset: 'your_dataset_name',
    projectId: 'your_project_id',
  })
);

// 使用GROQ查询进行fetch
final results = await client.fetch('*[_type == "post"]');
print(results);

// 结果返回的是json字符串，使用解码器将其转换为对象
final decodedResults = jsonDecode(results);
print(decodedResults["result"]);

使用方法

目前，这个包主要有三种用途：

1. 使用groq从你的数据集中获取数据。
2. 使用action方法执行CRUD操作，如创建、编辑、发布和删除。
3. 将文件和图像等资产转换为你的应用可以使用的URL，基于提供的sanity凭据。

Fetch

所有操作都是来自DartSanityClient客户端实例的方法。

import 'package:dart_sanity_client/dart_sanity_client.dart';

final client = DartSanityClient(
  SanityConfig({
    dataset: 'yourdataset',
    projectId: 'yourprojectid',
  })
);

final results = await client.fetch('*[_type == "post"]{title}');

客户端默认使用apicdn.sanity.io，但你可以通过将apiCdn设置为false来选择退出。

GraphQL也得到了支持，你需要在SanityConfig构造函数中设置graphQl: true。从那时起，所有的fetch请求都将使用graphql端点。注意：你必须首先部署启用GraphQL的sanity工作室，请参阅官方文档以了解如何设置GraphQL。另外，如果你有多个使用标签的GraphQL数据集，可以通过在fetch方法中设置graphQlTag: "foo"来指定查询应使用的特定数据集。

资产

在编写groq查询时，你经常得到的是资产引用而不是实际的资产文件。或者你可能需要使用图像API来模糊或旋转图像，urlFor()可以帮你解决这个问题。

/// 传递一个图像引用将返回正确的CDN URL
final image = client.urlFor('image-adf124-200x200-jpg');
/// https://cdn.sanity.io/images/{projectid}/{dataset}/adf124.jpg

/// 这也适用于文件
final image = client.urlFor('file-adf124-pdf');
/// https://cdn.sanity.io/files/{projectId}/{dataset}/adf124.pdf

/// 对于图像，你可以传递参数以多种方式操纵图像
final blurImage = client.urlFor('image-adf124-200x200-jpg', options: ImageOptions(blur: 100));
/// 每个选项的描述可以在sanity.io上找到 https://www.sanity.io/docs/image-urls#BhPyF4m0

动作

HTTP客户端的一个重要支柱是动作API。你可以对你数据集执行一系列CRUD操作。在数据集上运行动作就像调用客户端实例上的action方法一样简单。每个动作都有自己的构造函数，并且由于API的工作方式，可以通过数组批量执行这些动作。

import 'package:dotenv/dotenv.dart';
/// 强烈建议使用某种dotfile加载器来管理你的凭据
Directory current = Directory.current;
final env = DotEnv(includePlatformEnvironment: true)
  ..load(['${current.path}/.env']);

final client = DartSanityClient(
  SanityConfig(
    dataset: env['dataset'] ?? '',
    projectId: env['projectId'] ?? '',
    /// token是必需的，你需要生成一个具有写权限的令牌。
    token: env['token'],
  ),
);

/// 发布ID
final String pid = 'foo';
/// 草稿ID
final String did = 'drafts.$pid';

/// 创建一个新的带有标题字段的post文档。_id和_type对于创建操作是必需的。
final createA = CreateAction(
  publishedId: pid, 
  attributes: {
     "_id": pid,
     "_type": "post",
     "title": "hello world!",
   },
 );

/// 发布动作
final publishA = PublishAction(publishedId: pid, draftId: did);

/// 动作作为数组传递。每个动作按顺序运行，但事务发生在单个操作中。
/// 在这里，我们创建我们的文章并发布它。设置dryRun为true将仅验证操作是否成功。
/// 如果你收到一个事务ID，则表示没有错误，并且可以安全地移除dryRun参数（默认为false）。
final runActions = await client.action([createA, publishA], dryRun: true);

你可以查看官方文档以获取可以使用此包执行的所有动作的完整列表 https://www.sanity.io/docs/http-actions#5e9fc8d16fe1

示例代码

import 'dart:convert';
import 'dart:io';
import 'package:dotenv/dotenv.dart';
import 'package:dart_sanity_client/dart_sanity_client.dart';

Future<dynamic> main() async {
  // 用于在控制台中格式化输出的快速格式化程序。
  JsonDecoder decoder = JsonDecoder();
  JsonEncoder encoder = JsonEncoder.withIndent('  ');
  void prettyPrintJson(String input) {
    var object = decoder.convert(input);
    var prettyString = encoder.convert(object);
    prettyString.split('\n').forEach((element) => print(element));
  }

  // 获取.env文件以测试私有的sanity凭证
  Directory current = Directory.current;
  final env = DotEnv(includePlatformEnvironment: true)
    ..load(['${current.path}/.env']);

  // 初始化客户端
  final DartSanityClient client = DartSanityClient(
    SanityConfig(
      dataset: env['dataset'] ?? '',
      projectId: env['projectId'] ?? '',
    ),
  );

  final String query = '*[_type == "post"]{title}';
  // 使用GROQ查询进行fetch
  final dynamic results = await client.fetch(query);

  prettyPrintJson(results);
}