Optimistic update missing return and doc fixes

ConrabOpto · Dec 5, 2024 · 2f9a147 · 2f9a147
1 parent b0daa07
commit 2f9a147
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -156,10 +156,10 @@ const MesssageView = observer((props) => {
 
 ```tsx
 import { types } from 'mobx-state-tree';
-import { createQuery, RequestModel } from 'mst-query';
+import { createInfiniteQuery, RequestModel } from 'mst-query';
 import { MessageModel } from './models';
 
-const MessagesQuery = createQuery('MessagesQuery', {
+const MessagesQuery = createInfiniteQuery('MessagesQuery', {
     data: types.model({ items: types.array(types.reference(MessageModel)) }),
     pagination: types.model({ offset: types.number, limit: types.number }),
     endpoint({ request }) {
@@ -175,13 +175,13 @@ const MessageStore = createModelStore('MessageStore', MessageModel).props({
 ```
 
 ```tsx
-import { useQuery } from 'mst-query';
+import { useInfiniteQuery } from 'mst-query';
 import { observer } from 'mobx-react';
 import { MessageListQuery } from './MessageListQuery';
 
 const MesssageListView = observer((props) => {
     const [offset, setOffset] = useState(0);
-    const { data, isFetchingMore, query } = useQuery(messageStore.messagesQuery, {
+    const { data, isFetchingMore, query } = useInfiniteQuery(messageStore.messagesQuery, {
         request: { filter: '' },
         pagination: { offset, limit: 20 },
     });
@@ -246,9 +246,11 @@ const AddMessage = observer((props) => {
                 onClick={() => {
                     addMessage({
                         request: { message },
-                        optimisticResponse: {
-                            id: 'temp' + Math.random(),
-                            message,
+                        optimisticUpdate() {
+                            return {
+                                id: 'temp' + Math.random(),
+                                message,
+                            };
                         },
                     });
                     setMessage('');

diff --git a/packages/mst-query/src/MstQueryHandler.ts b/packages/mst-query/src/MstQueryHandler.ts
@@ -292,11 +292,16 @@ export class MstQueryHandler {
     mutate(options: any = {}): Promise<() => any> {
         const { optimisticUpdate } = options;
         let updateRecorder: IPatchRecorder;
+        let result: any;
         if (optimisticUpdate) {
             updateRecorder = recordPatches(getRoot(this.model));
-            optimisticUpdate();
+            result = optimisticUpdate();
             updateRecorder.stop();
         }
+        if (result) {
+            const data = this.prepareData(result);
+            this.notify({ onMutate: true }, data, this.model);
+        }
         return this.run(options).then(
             (result) => this.onSuccess(result, { updateRecorder }),
             (err) => this.onError(err, { updateRecorder }),

diff --git a/packages/mst-query/src/create.ts b/packages/mst-query/src/create.ts
@@ -277,7 +277,7 @@ export function createMutation<TData extends IAnyType, TRequest extends IAnyType
                 return next();
             }) as <TResult = any>(options: {
                 request: SnapshotIn<TRequest>;
-                optimisticUpdate?: () => void;
+                optimisticUpdate?: () => any;
                 meta?: { [key: string]: any };
             }) => Promise<ReturnData<Instance<TData>, TResult>>,
             abort: self.__MstQueryHandler.abort,