floppy-disk 2.0.0-beta.4 → 2.0.0

package/README.md

@@ -17,16 +17,43 @@ import {
   useInfiniteQuery,
   useMutation,
 } from '@tanstack/react-query'; // 41 kB (gzipped: 11 kB)
-import { createQuery, createMutation } from 'floppy-disk'; // 7.5 kB (gzipped: 2.6 kB) 🎉
+import { createQuery, createMutation } from 'floppy-disk'; // 8.1 kB (gzipped: 2.7 kB) 🎉
 ```
 
 - Using Zustand & React-Query: https://demo-zustand-react-query.vercel.app/  
-  👉 Total: **309.22 kB**
+  👉 Total: **309.21 kB**
 - Using Floppy Disk: https://demo-floppy-disk.vercel.app/  
-  👉 Total: **282.86 kB** 🎉
+  👉 Total: **284.8 kB** 🎉
+
+## Key Features
+
+- Create store ✅
+  - Yes, it also support middleware & set/get state outside component ✅
+  - Store event (`onSubscribe`, `onUnsubscribe`, etc.) ✅
+  - Use store as local state manager ✅
+- Create stores (yes, it's plural) ✅ \*_controlled with a store key_
+- Create query ✅
+  - Dedupe multiple request ✅
+  - Auto-update stale data (stale-while-revalidate) ✅
+  - Enable/disable query ✅
+  - Auto-fetch or manual (lazy query) ✅
+  - Retry on error (retry count, retry delay) ✅
+  - SSR/SSG's initial query data ✅
+  - Optimistic update ✅
+  - Invalidate query ✅
+  - Reset query ✅
+  - Query with param (query key) ✅
+  - Infinite query ✅
+  - Get query data outside component ✅
+  - Custom reactivity ✅
+  - Fetching mechanisms are agnostically built on promises ✅
+    - Can be used with literally any asynchronous data fetching client, including GraphQL ✅
+- Create mutation ✅
 
 ## Table of Contents
 
+- [Key Features](#key-features)
+- [Table of Contents](#table-of-contents)
 - [Store](#store)
   - [Basic Concept](#basic-concept)
   - [Advanced Concept](#advanced-concept)
@@ -446,12 +473,11 @@ Actions:
 
 ```jsx
 function Actions() {
-  const { fetch, forceFetch, markAsStale, reset } = useGitHubQuery(() => []);
+  const { fetch, forceFetch, reset } = useGitHubQuery(() => []);
   return (
     <>
       <button onClick={fetch}>Call query if the query data is stale</button>
       <button onClick={forceFetch}>Call query</button>
-      <button onClick={markAsStale}>Mark as stale</button>
       <button onClick={reset}>Reset query</button>
     </>
   );
@@ -470,7 +496,7 @@ const useGitHubQuery = createQuery(
   {
     fetchOnMount: false,
     enabled: () => !!useUserQuery.get().data?.user,
-    select: (response) => response.name
+    select: (response) => response.name,
     staleTime: Infinity, // Never stale
     retry: 0, // No retry
     onSuccess: (response) => {},
@@ -478,6 +504,21 @@ const useGitHubQuery = createQuery(
     onSettled: () => {},
   },
 );
+
+function MyComponent() {
+  const { data, response } = useGitHubQuery();
+  /**
+   * Since in option we select the data like this:
+   * select: (response) => response.name
+   *
+   * The return will be:
+   * {
+   *   response: { id: 677863376, name: "floppy-disk", ... },
+   *   data: "floppy-disk",
+   *   ...
+   * }
+   */
+}
 ```
 
 Get data or do something outside component:
@@ -620,15 +661,15 @@ function Login() {
     <div>
       <button
         disabled={isWaiting}
-        onClick={() =>
+        onClick={() => {
           mutate({ email: 'foo@bar.baz', password: 's3cREt' }).then(({ response, error }) => {
             if (error) {
               showToast('Login failed');
             } else {
               showToast('Login success');
             }
-          })
-        }
+          });
+        }}
       >
         Login
       </button>
@@ -637,6 +678,37 @@ function Login() {
 }
 ```
 
+Optimistic update:
+
+```jsx
+function SaveProduct() {
+  const { mutate, isWaiting } = useEditProductMutation();
+  const { getValues } = useFormContext();
+
+  return (
+    <button
+      disabled={isWaiting}
+      onClick={() => {
+        const payload = getValues();
+
+        const { revert, invalidate } = useProductQuery.optimisticUpdate({
+          key: { id: payload.id },
+        });
+
+        mutate(payload).then(({ response, error }) => {
+          if (error) {
+            revert();
+          }
+          invalidate();
+        });
+      }}
+    >
+      Save
+    </button>
+  );
+}
+```
+
 > Example: [https://codesandbox.io/.../examples/react/mutation](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/mutation)
 
 <br><br>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floppy-disk",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",
@@ -9,7 +9,8 @@
     "react",
     "hooks",
     "store",
-    "utilities"
+    "utilities",
+    "query"
   ],
   "author": "Muhammad Afifudin",
   "license": "MIT",