floppy-disk 1.4.0-beta.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ This library was highly-inspired by [Zustand](https://www.npmjs.com/package/zust
|
|
|
9
9
|
```js
|
|
10
10
|
import { create } from 'zustand'; // 3.3 kB (gzipped: 1.5 kB)
|
|
11
11
|
|
|
12
|
-
import { createStore } from 'floppy-disk'; // 1.
|
|
12
|
+
import { createStore } from 'floppy-disk'; // 1.3 kB (gzipped: 702 B) 🎉
|
|
13
13
|
|
|
14
14
|
import {
|
|
15
15
|
QueryClient,
|
|
@@ -19,13 +19,13 @@ import {
|
|
|
19
19
|
useMutation,
|
|
20
20
|
} from '@tanstack/react-query'; // 41 kB (gzipped: 11 kB)
|
|
21
21
|
|
|
22
|
-
import { createQuery, createMutation } from 'floppy-disk'; //
|
|
22
|
+
import { createQuery, createMutation } from 'floppy-disk'; // 7.5 kB (gzipped: 2.6 kB) 🎉
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
- Using Zustand & React-Query: https://demo-zustand-react-query.vercel.app/
|
|
26
26
|
👉 Total: **309.22 kB** ~ gzipped 97.66 kB
|
|
27
27
|
- Using Floppy Disk: https://demo-floppy-disk.vercel.app/
|
|
28
|
-
👉 Total: **
|
|
28
|
+
👉 Total: **282.86 kB** ~ gzipped 90.46 kB
|
|
29
29
|
|
|
30
30
|
## Table of Contents
|
|
31
31
|
|
|
@@ -338,6 +338,7 @@ const useCatStores = createStores(
|
|
|
338
338
|
onBeforeChangeKey: (nextKey, prevKey) => {
|
|
339
339
|
console.log('Store key changed', nextKey, prevKey);
|
|
340
340
|
},
|
|
341
|
+
// ... same as createStore
|
|
341
342
|
},
|
|
342
343
|
);
|
|
343
344
|
|
|
@@ -367,6 +368,10 @@ function Control({ catId }) {
|
|
|
367
368
|
}
|
|
368
369
|
```
|
|
369
370
|
|
|
371
|
+
> **Examples:**
|
|
372
|
+
>
|
|
373
|
+
> - [https://codesandbox.io/.../examples/react/stores](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/stores)
|
|
374
|
+
|
|
370
375
|
## Query & Mutation
|
|
371
376
|
|
|
372
377
|
With the power of `createStores` function and a bit creativity, we can easily create a hook just like `useQuery` and `useInfiniteQuery` in [React-Query](https://tanstack.com/query) using `createQuery` function.
|
|
@@ -398,6 +403,10 @@ function SingleQuery() {
|
|
|
398
403
|
}
|
|
399
404
|
```
|
|
400
405
|
|
|
406
|
+
> **Examples:**
|
|
407
|
+
>
|
|
408
|
+
> - [https://codesandbox.io/.../examples/react/query](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/query)
|
|
409
|
+
|
|
401
410
|
Custom reactivity:
|
|
402
411
|
|
|
403
412
|
```jsx
|
|
@@ -552,8 +561,9 @@ function PokemonListPage() {
|
|
|
552
561
|
**Note:**
|
|
553
562
|
|
|
554
563
|
- The default stale time is 3 seconds.
|
|
555
|
-
- The default
|
|
556
|
-
|
|
564
|
+
- The default error retry attempt is 1 time, and retry delay is 3 seconds.
|
|
565
|
+
- The default reactivity of a query is `(s) => [s.data, s.error]`.
|
|
566
|
+
(For paginated: `(s) => [s.data, s.error, s.isWaitingNextPage, s.hasNextPage]`)
|
|
557
567
|
- You can change the `defaultDeps` on `createQuery` options.
|
|
558
568
|
|
|
559
569
|
### Mutation
|
|
@@ -599,6 +609,17 @@ function Login() {
|
|
|
599
609
|
}
|
|
600
610
|
```
|
|
601
611
|
|
|
612
|
+
> **Examples:**
|
|
613
|
+
>
|
|
614
|
+
> - [https://codesandbox.io/.../examples/react/mutation](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/mutation)
|
|
615
|
+
|
|
616
|
+
<br><br>
|
|
617
|
+
|
|
618
|
+
<p align="center">
|
|
619
|
+
— ✨ 💾 ✨ —
|
|
620
|
+
</p>
|
|
621
|
+
<br>
|
|
622
|
+
|
|
602
623
|
## Important Notes
|
|
603
624
|
|
|
604
625
|
Don't mutate.
|