@ametie/vue-muza-use 0.11.0 → 1.0.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 +68 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,6 +85,7 @@ A production-ready composable that eliminates boilerplate and solves the hard pr
|
|
|
85
85
|
- [ignoreUpdates — Update Without Re-fetching](#ignoreupdates--update-without-re-fetching)
|
|
86
86
|
- [Response Caching](#response-caching)
|
|
87
87
|
- [Stale-While-Revalidate (SWR)](#stale-while-revalidate-swr)
|
|
88
|
+
- [Refetch Triggers](#refetch-triggers)
|
|
88
89
|
- [Polling (Background Updates)](#polling-background-updates)
|
|
89
90
|
- [Error Handling](#error-handling)
|
|
90
91
|
- [retry — Automatic Request Retry](#retry--automatic-request-retry)
|
|
@@ -751,6 +752,73 @@ const { data, revalidating, error } = useApi('/dashboard', {
|
|
|
751
752
|
|
|
752
753
|
---
|
|
753
754
|
|
|
755
|
+
### Refetch Triggers
|
|
756
|
+
|
|
757
|
+
**TL;DR: Automatically re-fetch when the user returns to the tab or regains connectivity — no manual wiring needed.**
|
|
758
|
+
|
|
759
|
+
#### `refetchOnFocus` — Re-fetch on Tab Return
|
|
760
|
+
|
|
761
|
+
```typescript
|
|
762
|
+
const { data } = useApi('/dashboard', {
|
|
763
|
+
immediate: true,
|
|
764
|
+
refetchOnFocus: true, // default throttle: 60s
|
|
765
|
+
})
|
|
766
|
+
```
|
|
767
|
+
|
|
768
|
+
Pass `{ throttle: 0 }` to always re-fetch regardless of how recently data was loaded:
|
|
769
|
+
|
|
770
|
+
```typescript
|
|
771
|
+
const { data } = useApi('/notifications', {
|
|
772
|
+
immediate: true,
|
|
773
|
+
refetchOnFocus: { throttle: 0 },
|
|
774
|
+
})
|
|
775
|
+
```
|
|
776
|
+
|
|
777
|
+
Works seamlessly with `cache: { swr: true }` — the user sees stale data instantly, fresh data arrives silently in the background:
|
|
778
|
+
|
|
779
|
+
```typescript
|
|
780
|
+
const { data, revalidating } = useApi('/feed', {
|
|
781
|
+
cache: { id: 'feed', swr: true },
|
|
782
|
+
refetchOnFocus: true,
|
|
783
|
+
immediate: true,
|
|
784
|
+
})
|
|
785
|
+
```
|
|
786
|
+
|
|
787
|
+
#### `refetchOnReconnect` — Re-fetch on Network Restore
|
|
788
|
+
|
|
789
|
+
```typescript
|
|
790
|
+
const { data } = useApi('/messages', {
|
|
791
|
+
immediate: true,
|
|
792
|
+
refetchOnReconnect: true,
|
|
793
|
+
})
|
|
794
|
+
```
|
|
795
|
+
|
|
796
|
+
#### Global Configuration
|
|
797
|
+
|
|
798
|
+
Apply to all `useApi` instances at once:
|
|
799
|
+
|
|
800
|
+
```typescript
|
|
801
|
+
createApiClient({
|
|
802
|
+
axios,
|
|
803
|
+
globalOptions: {
|
|
804
|
+
refetchOnFocus: true,
|
|
805
|
+
refetchOnReconnect: true,
|
|
806
|
+
},
|
|
807
|
+
})
|
|
808
|
+
```
|
|
809
|
+
|
|
810
|
+
Opt individual requests out with `refetchOnFocus: false`:
|
|
811
|
+
|
|
812
|
+
```typescript
|
|
813
|
+
// Global refetchOnFocus: true, but this request opts out
|
|
814
|
+
const { data } = useApi('/static-config', {
|
|
815
|
+
refetchOnFocus: false,
|
|
816
|
+
immediate: true,
|
|
817
|
+
})
|
|
818
|
+
```
|
|
819
|
+
|
|
820
|
+
---
|
|
821
|
+
|
|
754
822
|
### Polling (Background Updates)
|
|
755
823
|
|
|
756
824
|
**TL;DR: Keep data fresh with smart polling that automatically pauses when the browser tab is hidden.**
|