fg-devkit 1.17.2 → 1.17.3
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.
|
@@ -75,6 +75,42 @@ alwaysApply: true
|
|
|
75
75
|
- Set `staleTime` intentionally per resource; keep `refetchOnWindowFocus` off unless fresh-on-focus behavior is required.
|
|
76
76
|
- On mutation success, update cache intentionally (`setQueryData`) and/or invalidate the narrowest matching keys.
|
|
77
77
|
- Respect shared query client retry behavior and only override retries when endpoint-specific behavior is needed.
|
|
78
|
+
|
|
79
|
+
### Query loading UI
|
|
80
|
+
|
|
81
|
+
TanStack Query v5 flags (do not treat them as interchangeable):
|
|
82
|
+
|
|
83
|
+
| Flag | Meaning |
|
|
84
|
+
| --- | --- |
|
|
85
|
+
| `isPending` | No cached data yet (`status === 'pending'`) |
|
|
86
|
+
| `isFetching` | Any in-flight request, including background refetch |
|
|
87
|
+
| `isLoading` | First fetch in flight (`isPending && isFetching`) |
|
|
88
|
+
|
|
89
|
+
Rules:
|
|
90
|
+
|
|
91
|
+
1. **Content-blocking / full-page spinner** — use `isLoading` (or combine several `isLoading*` flags). Prefer `isLoading` over bare `isPending` when the query can be `enabled: false` (lazy/disabled queries stay `isPending` without fetching).
|
|
92
|
+
2. **Do not use bare `isFetching` for blocking UI** — it re-shows the full loader on every background refetch. Use `isFetching` only for subtle “refreshing” indicators while keeping content visible.
|
|
93
|
+
3. **Paginated / `keepPreviousData` lists** — show a hard loader only when there is nothing useful to render:
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
const isLoading = computed(() => isPending.value || (isFetching.value && !data.value))
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
4. **Multiple queries for one screen** — combine with OR into one (or purpose-prefixed) computed:
|
|
100
|
+
|
|
101
|
+
```ts
|
|
102
|
+
const isLoading = computed(() => isLoadingDetails.value || isLoadingList.value)
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
5. **No passthrough aliases** — do not wrap a single flag (`const loading = computed(() => isFetching.value)`). Destructure and rename instead:
|
|
106
|
+
|
|
107
|
+
```ts
|
|
108
|
+
const { data, isLoading, error } = useGetDetails(id)
|
|
109
|
+
// template: v-show="isLoading"
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
6. **Naming** — local query-derived booleans use the `is*` prefix: `isLoading`, `isLoadingUnits`, `isLoadingHistory`. Keep FDS/component prop names as-is (`:loading="isLoading"`). Mutations: rename `isPending` to intent (`isSaving`, `isSubmitting`, `isUploading`).
|
|
113
|
+
|
|
78
114
|
- TanStack Query boolean flags (`isPending`, `isSuccess`, `isError`) are typed `Ref<false> | Ref<true>`. `vue-tsc` unwraps that union in templates to `boolean`; the Vue language plugin may not.
|
|
79
115
|
- Narrow in script (`const isPending = mutation.isPending as Ref<boolean>`), then bind without `.value` (`:loading="isPending"`). Do not use `.value` in templates (fails `vue-tsc`) and do not add a wrapping `computed` only to satisfy the editor.
|
|
80
116
|
|
package/package.json
CHANGED