Flutter数据标准化处理插件normalize的使用

插件介绍

normalize 插件主要用于对 GraphQL 操作的数据进行标准化和去标准化处理。通过 normalize 函数，可以将 GraphQL 查询的结果写入一个标准化的 Map 中，从而有效地缓存查询结果。这个函数会遍历 GraphQL AST，并且只包含在 GraphQL 文档中指定的字段。

特点

• Fragments：支持片段
• Variables：支持变量
• Interface & Union types：支持接口和联合类型
• Aliases：支持别名
• TypePolicy（参见 Apollo）：支持自定义类型策略

依赖项

此库依赖于 gql 库。

使用方法

假设我们有以下查询：

import 'package:gql/language.dart';
import 'package:gql/ast.dart';
import 'package:normalize/normalize.dart';

final DocumentNode query = parseString("""
  query TestQuery {
    posts {
      id
      __typename
      author {
        id
        __typename
        name
      }
      title
      comments {
        id
        __typename
        commenter {
          id
          __typename
          name
        }
      }
    }
  }
""")

执行该查询后得到如下响应数据：

final Map<String, dynamic> data = {
  "posts": [
    {
      "id": "123",
      "__typename": "Post",
      "author": {
        "id": "1",
        "__typename": "Author",
        "name": "Paul",
      },
      "title": "My awesome blog post",
      "comments": [
        {
          "id": "324",
          "__typename": "Comment",
          "commenter": {
            "id": "2",
            "__typename": "Author",
            "name": "Nicole",
          }
        }
      ],
    }
  ]
};

我们可以运行 normalize 函数来标准化这些数据：

final normalizedMap = {};
normalizeOperation(
  merge: (dataId, value) =>
      (normalizedMap[dataId] ??= {}).addAll(value),
  document: query,
  data: data,
);
print(normalizedMap);

这将产生如下标准化结果：

{
  "Query": {
    "posts": [
      {"$ref": "Post:123"}
    ]
  },
  "Post:123": {
    "id": "123",
    "__typename": "Post",
    "author": {"$ref": "Author:1"},
    "title": "My awesome blog post",
    "comments": [
      {"$ref": "Comment:324"}
    ],
  },
  "Author:1": {
    "id": "1",
    "__typename": "Author",
    "name": "Paul",
  },
  "Comment:324": {
    "id": "324",
    "__typename": "Comment",
    "commenter": {"$ref": "Author:2"}
  },
  "Author:2": {
    "id": "2",
    "__typename": "Author",
    "name": "Nicole",
  }
}

如果稍后需要去标准化这些数据（例如从缓存中读取），可以通过调用 denormalize 来实现：

denormalizeOperation(
  document: query,
  read: (dataId) => normalizedMap[dataId],
)

完整示例 Demo

下面是一个完整的示例，展示了如何在一个 Flutter 应用中使用 normalize 插件。

import 'package:flutter/material.dart';
import 'package:gql/language.dart';
import 'package:gql/ast.dart';
import 'package:normalize/normalize.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Normalize Plugin Demo')),
        body: Center(child: MyHomePage()),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final DocumentNode query = parseString("""
  query TestQuery {
    posts {
      id
      __typename
      author {
        id
        __typename
        name
      }
      title
      comments {
        id
        __typename
        commenter {
          id
          __typename
          name
        }
      }
    }
  }
  """);

  final Map<String, dynamic> data = {
    "posts": [
      {
        "id": "123",
        "__typename": "Post",
        "author": {
          "id": "1",
          "__typename": "Author",
          "name": "Paul",
        },
        "title": "My awesome blog post",
        "comments": [
          {
            "id": "324",
            "__typename": "Comment",
            "commenter": {
              "id": "2",
              "__typename": "Author",
              "name": "Nicole",
            }
          }
        ],
      }
    ]
  };

  late Map<String, dynamic> normalizedMap;

  @override
  void initState() {
    super.initState();
    // Normalize the data
    normalizedMap = {};
    normalizeOperation(
      merge: (dataId, value) =>
          (normalizedMap[dataId] ??= {}).addAll(value),
      document: query,
      data: data,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Normalized Data:"),
          Expanded(
            child: SingleChildScrollView(
              child: Text(normalizedMap.toString()),
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // Denormalize the data
              final denormalizedData = denormalizeOperation(
                document: query,
                read: (dataId) => normalizedMap[dataId],
              );
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: Text("Denormalized Data"),
                  content: SingleChildScrollView(
                    child: Text(denormalizedData.toString()),
                  ),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: Text("Close"),
                    )
                  ],
                ),
              );
            },
            child: Text("Denormalize Data"),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用程序，它演示了如何使用 normalize 插件来标准化和去标准化 GraphQL 查询的结果。当用户点击按钮时，应用程序会显示去标准化后的原始数据。

局限性

目前，TypePolicy.keyFields 和 FieldPolicy.keyArgs 只接受字符串的扁平列表，不支持函数或嵌套的字符串列表。此外，FieldPolicy.merge 和 FieldPolicy.read 也尚未实现。

如果您有任何问题或需要进一步的帮助，请随时联系我！