mst-query 使用教程

mst-query 使用教程

mst-queryQuery library for mobx-state-tree项目地址:https://gitcode.com/gh_mirrors/ms/mst-query

项目介绍

mst-query 是一个专为 MobX-State-Tree (MST) 设计的查询库。它类似于 react-query，但在 MobX-State-Tree 存储之上作为一层薄薄的封装。主要特性包括：

• 使用 React hooks 进行异步数据管理
• 自动数据规范化
• 数据过期时的查询失效
• 命令式 API
• 乐观更新
• 垃圾回收

项目快速启动

安装

首先，你需要安装 mst-query 及其依赖：

npm install mst-query mobx-state-tree

创建查询模型

定义一个查询模型，用于从服务器加载数据：

import { createQuery, t } from 'mst-query';

const LoadTodoQuery = createQuery("LoadTodoQuery", {
  data: t.reference(Todo),
  request: t.model({ id: t.string }),
  async endpoint({ request }) {
    return todoApi.get(request.id);
  }
});

使用查询

在组件中使用查询：

import { observer } from 'mobx-react';

const TodoContainer = observer((props) => {
  const { todo, store } = props;
  return (
    <Todo
      todo={todo}
      onUpdate={store.updateTodo}
      permissionError={store.permissionError}
    />
  );
});

应用案例和最佳实践

异步数据管理

使用 React hooks 进行异步数据管理，确保数据在组件中的正确加载和更新：

import { useQuery } from 'mst-query';

const TodoComponent = observer(() => {
  const { data, isLoading, error } = useQuery(LoadTodoQuery, { id: '1' });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <Todo todo={data} />;
});

乐观更新

实现乐观更新，提升用户体验：

const TodoUpdateMutation = createMutation("TodoUpdateMutation", {
  data: t.reference(Todo),
  request: TodoRequestModel,
  async endpoint({ request }) {
    return todoApi.update(request);
  },
  optimisticUpdate({ request, current }) {
    return { ...current, ...request };
  }
});

典型生态项目

MobX-State-Tree

mst-query 是建立在 MobX-State-Tree 之上的，因此了解和使用 MST 是必要的。MST 提供了一个强大且灵活的状态管理解决方案。

React-Query

虽然 mst-query 是专为 MST 设计的，但它的很多概念和功能都借鉴了 react-query，因此熟悉 react-query 也会对使用 mst-query 有所帮助。

通过以上内容，你应该能够快速上手并使用 mst-query 进行项目开发。希望这个教程对你有所帮助！

mst-queryQuery library for mobx-state-tree项目地址:https://gitcode.com/gh_mirrors/ms/mst-query