@jgamaraalv/ts-dev-kit 2.1.0 → 2.3.0

package/skills/tanstack-query/references/advanced-patterns.md

@@ -0,0 +1,376 @@
+# TanStack Query v5 — Advanced Patterns
+
+## Table of Contents
+- [TypeScript](#typescript)
+- [Suspense](#suspense)
+- [Dependent Queries](#dependent-queries)
+- [Disabling Queries](#disabling-queries)
+- [Network Modes](#network-modes)
+- [Request Waterfalls](#request-waterfalls)
+- [Default Query Function](#default-query-function)
+- [Window Focus Refetching](#window-focus-refetching)
+- [Placeholder Data](#placeholder-data)
+
+## TypeScript
+
+Requires TypeScript v4.7+. Type changes ship as **patch** semver.
+
+### Type Inference
+
+Types flow from `queryFn` automatically — do not pass generics unless necessary:
+
+```tsx
+// GOOD — types inferred
+const { data } = useQuery({
+  queryKey: ['todos'],
+  queryFn: () => fetchTodos(), // returns Promise<Todo[]>
+})
+// data: Todo[] | undefined
+
+// BAD — explicit generics break inference for other params
+const { data } = useQuery<Todo[], Error>({ ... })
+```
+
+### Type Narrowing (discriminated union)
+
+```tsx
+const { data, isSuccess, error, isError } = useQuery({ ... })
+
+if (isSuccess) {
+  data // Todo[] (not undefined)
+}
+if (isError) {
+  error // Error (not null)
+}
+```
+
+### Custom Error Types
+
+Prefer type narrowing over generics:
+
+```tsx
+if (axios.isAxiosError(error)) {
+  error // AxiosError
+}
+```
+
+### Register Interface — global type overrides
+
+```tsx
+declare module '@tanstack/react-query' {
+  interface Register {
+    defaultError: AxiosError         // all errors typed as AxiosError
+    queryMeta: { auth?: boolean }    // must extend Record<string, unknown>
+    mutationMeta: { auth?: boolean }
+  }
+}
+```
+
+### queryOptions / mutationOptions for type flow
+
+```tsx
+import { queryOptions, mutationOptions } from '@tanstack/react-query'
+
+const todosOpts = (filters: Filters) => queryOptions({
+  queryKey: ['todos', filters],
+  queryFn: () => fetchTodos(filters),
+})
+
+// Types flow to getQueryData:
+const data = queryClient.getQueryData(todosOpts({ status: 'done' }).queryKey)
+//    ^? Todo[] | undefined
+
+const addTodoOpts = () => mutationOptions({
+  mutationKey: ['addTodo'],
+  mutationFn: (input: CreateTodo) => createTodo(input),
+})
+```
+
+### skipToken — type-safe conditional queries
+
+```tsx
+import { skipToken, useQuery } from '@tanstack/react-query'
+
+const { data } = useQuery({
+  queryKey: ['user', userId],
+  queryFn: userId ? () => fetchUser(userId) : skipToken,
+})
+// queryFn type is correctly inferred without worrying about undefined userId
+```
+
+## Suspense
+
+### Dedicated Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useSuspenseQuery` | Suspends until data ready; `data` guaranteed defined |
+| `useSuspenseInfiniteQuery` | Same for infinite queries |
+| `useSuspenseQueries` | Parallel suspense queries (avoids serial waterfall) |
+
+### Key differences from useQuery
+
+- No `enabled` option — cannot conditionally disable
+- No `placeholderData` — use `startTransition` to avoid fallback on key change
+- `data` is always defined (never `undefined`)
+- Multiple suspense queries in same component fetch **serially** — use `useSuspenseQueries` for parallel
+
+### Parallel suspense queries
+
+```tsx
+// WRONG — serial (Article suspends, then Comments fetches after)
+function Page({ id }: { id: string }) {
+  const { data: article } = useSuspenseQuery(articleOptions(id))
+  const { data: comments } = useSuspenseQuery(commentsOptions(id))
+}
+
+// CORRECT — parallel
+function Page({ id }: { id: string }) {
+  const [{ data: article }, { data: comments }] = useSuspenseQueries({
+    queries: [articleOptions(id), commentsOptions(id)],
+  })
+}
+```
+
+### Error boundary reset
+
+```tsx
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+
+function App() {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary onReset={reset} fallbackRender={({ resetErrorBoundary }) => (
+          <div>
+            <p>Something went wrong</p>
+            <button onClick={() => resetErrorBoundary()}>Try again</button>
+          </div>
+        )}>
+          <Page />
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  )
+}
+```
+
+### throwOnError default for suspense
+
+```tsx
+// Only throws when there's NO cached data
+throwOnError: (error, query) => typeof query.state.data === 'undefined'
+```
+
+To throw all errors: manually throw when `error && !isFetching`.
+
+## Dependent Queries
+
+Use `enabled` to chain queries:
+
+```tsx
+const { data: user } = useQuery({
+  queryKey: ['user', email],
+  queryFn: () => getUserByEmail(email),
+})
+
+const { data: projects } = useQuery({
+  queryKey: ['projects', user?.id],
+  queryFn: () => getProjectsByUser(user!.id),
+  enabled: !!user?.id,
+})
+```
+
+**Dynamic parallel dependent queries:**
+
+```tsx
+const { data: userIds } = useQuery({
+  queryKey: ['users'],
+  queryFn: getUsersData,
+  select: (users) => users.map(u => u.id),
+})
+
+const usersMessages = useQueries({
+  queries: userIds
+    ? userIds.map((id) => ({
+        queryKey: ['messages', id],
+        queryFn: () => getMessagesByUser(id),
+      }))
+    : [],
+})
+```
+
+## Disabling Queries
+
+### enabled: false
+
+- No auto-fetch on mount, no background refetch
+- Ignores `invalidateQueries` and `refetchQueries`
+- Manual `refetch()` still works
+- Without cache: starts `status: 'pending'`, `fetchStatus: 'idle'`
+
+### skipToken (preferred for TypeScript)
+
+```tsx
+const { data } = useQuery({
+  queryKey: ['todos', filter],
+  queryFn: filter ? () => fetchTodos(filter) : skipToken,
+})
+```
+
+**skipToken does NOT support `refetch()`** — throws "Missing queryFn". Use `enabled: false` if manual refetch is needed.
+
+### Lazy queries (preferred pattern)
+
+```tsx
+const [enabled, setEnabled] = useState(false)
+const { data } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  enabled,
+})
+<button onClick={() => setEnabled(true)}>Load</button>
+```
+
+### isLoading vs isPending
+
+- `isPending` = no cached data (regardless of fetch status)
+- `isLoading` = `isPending && isFetching` (first actual load)
+
+Use `isLoading` to distinguish "first load" from "disabled/idle".
+
+## Network Modes
+
+`networkMode: 'online' | 'always' | 'offlineFirst'` (default: `'online'`)
+
+| Mode | Behavior | Use Case |
+|------|----------|----------|
+| `online` | Only fetches with network; pauses retries offline | Default for most APIs |
+| `always` | Ignores online/offline; never pauses | AsyncStorage, local data, `Promise.resolve` |
+| `offlineFirst` | Tries once, pauses retries if offline | Service worker / HTTP cache (PWAs) |
+
+**Key:** With `online` mode, check both `status` and `fetchStatus` before showing spinners — a query can be `pending` + `paused` (no data, no network).
+
+## Request Waterfalls
+
+Each waterfall step = at least one server roundtrip. At 250ms latency (3G), 4 steps = 1000ms overhead.
+
+### Three types
+
+**1. Serial queries in one component:**
+```tsx
+// BAD — waterfall
+const { data: user } = useQuery(userOptions(email))
+const { data: projects } = useQuery({ ...projectsOptions(user?.id), enabled: !!user?.id })
+
+// FIX — restructure API to avoid dependency
+const { data: projects } = useQuery(projectsByEmailOptions(email))
+```
+
+**2. Nested component waterfalls:**
+Parent suspends → child mounts → child fetches. Fix: hoist child query up or prefetch at route level.
+
+**3. Code splitting + queries:**
+`Markup → JS → Lazy chunk → Query` = quadruple waterfall. Fix: prefetch at route level.
+
+### Fix with useSuspenseQueries
+
+```tsx
+// BAD — serial (each suspends before next mounts)
+const { data: a } = useSuspenseQuery(optionsA)
+const { data: b } = useSuspenseQuery(optionsB)
+
+// GOOD — parallel
+const [{ data: a }, { data: b }] = useSuspenseQueries({
+  queries: [optionsA, optionsB],
+})
+```
+
+### Fix with prefetching
+
+```tsx
+// In route loader or parent component:
+queryClient.prefetchQuery(articleOptions(id))
+queryClient.prefetchQuery(commentsOptions(id))
+// Both start fetching immediately, no waterfall
+```
+
+## Default Query Function
+
+Share one `queryFn` across all queries:
+
+```tsx
+const defaultQueryFn = async ({ queryKey }: { queryKey: QueryKey }) => {
+  const { data } = await axios.get(`https://api.example.com${queryKey[0]}`)
+  return data
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { queryFn: defaultQueryFn } },
+})
+
+// Usage — no queryFn needed:
+useQuery({ queryKey: ['/posts'] })
+useQuery({ queryKey: [`/posts/${postId}`], enabled: !!postId })
+```
+
+Per-query `queryFn` overrides the default.
+
+## Window Focus Refetching
+
+Enabled by default. Stale queries refetch when the browser tab regains focus.
+
+```tsx
+// Disable globally:
+new QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false } },
+})
+
+// Disable per query:
+useQuery({ queryKey: ['todos'], queryFn: fetchTodos, refetchOnWindowFocus: false })
+```
+
+### React Native
+
+```tsx
+import { AppState, Platform } from 'react-native'
+import { focusManager } from '@tanstack/react-query'
+
+function onAppStateChange(status: AppStateStatus) {
+  if (Platform.OS !== 'web') {
+    focusManager.setFocused(status === 'active')
+  }
+}
+
+useEffect(() => {
+  const sub = AppState.addEventListener('change', onAppStateChange)
+  return () => sub.remove()
+}, [])
+```
+
+## Placeholder Data
+
+Temporary display data that is NOT persisted to cache (unlike `initialData`).
+
+```tsx
+// Static placeholder
+useQuery({ queryKey: ['todos'], queryFn: fetchTodos, placeholderData: [] })
+
+// Keep previous data during key changes (pagination)
+useQuery({
+  queryKey: ['todos', id],
+  queryFn: () => fetchTodo(id),
+  placeholderData: (previousData) => previousData,
+})
+
+// From another query's cache (list → detail preview)
+useQuery({
+  queryKey: ['todo', todoId],
+  queryFn: () => fetchTodo(todoId),
+  placeholderData: () =>
+    queryClient.getQueryData<Todo[]>(['todos'])?.find(t => t.id === todoId),
+})
+```
+
+`isPlaceholderData` is `true` when showing placeholder data.

package/skills/tanstack-query/references/api-reference.md

@@ -0,0 +1,297 @@
+# TanStack Query v5 — API Reference
+
+## Table of Contents
+- [useQuery Options](#usequery-options)
+- [useQuery Returns](#usequery-returns)
+- [useMutation Options](#usemutation-options)
+- [useMutation Returns](#usemutation-returns)
+- [useInfiniteQuery Options](#useinfinitequery-options)
+- [useInfiniteQuery Returns](#useinfinitequery-returns)
+- [QueryClient Methods](#queryclient-methods)
+- [QueryCache](#querycache)
+- [MutationCache](#mutationcache)
+- [queryOptions / infiniteQueryOptions](#queryoptions--infinitequeryoptions)
+
+## useQuery Options
+
+```tsx
+const result = useQuery(options, queryClient?)
+```
+
+| Option | Type | Default |
+|--------|------|---------|
+| `queryKey` | `unknown[]` | **required** |
+| `queryFn` | `(context: QueryFunctionContext) => Promise<TData>` | **required** (unless default set) |
+| `enabled` | `boolean \| (query: Query) => boolean` | `true` |
+| `staleTime` | `number \| 'static' \| ((query) => number \| 'static')` | `0` |
+| `gcTime` | `number \| Infinity` | `300000` (5 min) / `Infinity` on server |
+| `retry` | `boolean \| number \| (failureCount, error) => boolean` | `3` client / `0` server |
+| `retryDelay` | `number \| (attempt, error) => number` | exponential backoff |
+| `retryOnMount` | `boolean` | `true` |
+| `refetchInterval` | `number \| false \| ((query) => number \| false)` | — |
+| `refetchIntervalInBackground` | `boolean` | `false` |
+| `refetchOnMount` | `boolean \| 'always' \| ((query) => boolean \| 'always')` | `true` |
+| `refetchOnWindowFocus` | `boolean \| 'always' \| ((query) => boolean \| 'always')` | `true` |
+| `refetchOnReconnect` | `boolean \| 'always' \| ((query) => boolean \| 'always')` | `true` |
+| `networkMode` | `'online' \| 'always' \| 'offlineFirst'` | `'online'` |
+| `select` | `(data: TData) => unknown` | — |
+| `initialData` | `TData \| () => TData` | — |
+| `initialDataUpdatedAt` | `number \| (() => number)` | — |
+| `placeholderData` | `TData \| (previousValue, previousQuery) => TData` | — |
+| `notifyOnChangeProps` | `string[] \| 'all'` | tracked access |
+| `structuralSharing` | `boolean \| (oldData, newData) => unknown` | `true` |
+| `throwOnError` | `boolean \| (error, query) => boolean` | — |
+| `meta` | `Record<string, unknown>` | — |
+| `subscribed` | `boolean` | `true` |
+
+**QueryFunctionContext** passed to `queryFn`:
+- `queryKey` — the query key array
+- `client` — the QueryClient instance
+- `signal` — AbortSignal for cancellation
+- `meta` — optional metadata from the query option
+
+**Key notes:**
+- `queryFn` must resolve data; data **cannot be `undefined`**
+- `initialData` persists to cache; `placeholderData` does not
+- `select` only re-runs when data or function reference changes — wrap in `useCallback` if inline
+- `staleTime: 'static'` — data is never stale, even `refetchOnWindowFocus: 'always'` is blocked
+
+## useQuery Returns
+
+| Property | Type | Notes |
+|----------|------|-------|
+| `data` | `TData \| undefined` | |
+| `error` | `TError \| null` | |
+| `status` | `'pending' \| 'error' \| 'success'` | |
+| `isPending` | `boolean` | No cached data |
+| `isSuccess` | `boolean` | |
+| `isError` | `boolean` | |
+| `isLoading` | `boolean` | `isPending && isFetching` (first load) |
+| `isLoadingError` | `boolean` | Failed on first fetch |
+| `isRefetchError` | `boolean` | Failed while refetching |
+| `fetchStatus` | `'fetching' \| 'paused' \| 'idle'` | |
+| `isFetching` | `boolean` | queryFn running |
+| `isPaused` | `boolean` | Wants to fetch but offline |
+| `isRefetching` | `boolean` | `isFetching && !isPending` |
+| `isStale` | `boolean` | |
+| `isPlaceholderData` | `boolean` | |
+| `isFetched` | `boolean` | |
+| `isFetchedAfterMount` | `boolean` | |
+| `dataUpdatedAt` | `number` | Timestamp |
+| `errorUpdatedAt` | `number` | |
+| `failureCount` | `number` | Resets to 0 on success |
+| `failureReason` | `TError \| null` | |
+| `errorUpdateCount` | `number` | Total errors ever |
+| `isEnabled` | `boolean` | |
+| `refetch` | `(opts?) => Promise<UseQueryResult>` | `cancelRefetch` defaults to `true` |
+
+## useMutation Options
+
+```tsx
+const result = useMutation(options, queryClient?)
+```
+
+| Option | Type | Default |
+|--------|------|---------|
+| `mutationFn` | `(variables, context: MutationFunctionContext) => Promise<TData>` | **required** |
+| `mutationKey` | `unknown[]` | — |
+| `gcTime` | `number \| Infinity` | — |
+| `retry` | `boolean \| number \| (failureCount, error) => boolean` | `0` |
+| `retryDelay` | `number \| (attempt, error) => number` | — |
+| `networkMode` | `'online' \| 'always' \| 'offlineFirst'` | `'online'` |
+| `onMutate` | `(variables, context) => Promise<TOnMutateResult> \| TOnMutateResult` | — |
+| `onSuccess` | `(data, variables, onMutateResult, context) => Promise \| void` | — |
+| `onError` | `(error, variables, onMutateResult, context) => Promise \| void` | — |
+| `onSettled` | `(data, error, variables, onMutateResult, context) => Promise \| void` | — |
+| `scope` | `{ id: string }` | unique (parallel) |
+| `throwOnError` | `boolean \| (error) => boolean` | — |
+| `meta` | `Record<string, unknown>` | — |
+
+**Callback context:** `onMutate` return value is passed as `onMutateResult` to `onSuccess`/`onError`/`onSettled`. The `context` object provides `context.client` (the QueryClient).
+
+**Scope:** Mutations with the same `scope.id` run **serially** (queued), not in parallel.
+
+## useMutation Returns
+
+| Property | Type | Notes |
+|----------|------|-------|
+| `mutate` | `(variables, { onSuccess?, onError?, onSettled? }) => void` | Fire and forget |
+| `mutateAsync` | `(variables, opts?) => Promise<TData>` | Returns promise |
+| `status` | `'idle' \| 'pending' \| 'error' \| 'success'` | |
+| `isIdle`, `isPending`, `isSuccess`, `isError` | `boolean` | |
+| `isPaused` | `boolean` | |
+| `data` | `TData \| undefined` | |
+| `error` | `TError \| null` | |
+| `variables` | `TVariables \| undefined` | Last call's variables |
+| `reset` | `() => void` | Clear mutation state |
+| `submittedAt` | `number` | |
+| `failureCount` | `number` | |
+| `failureReason` | `TError \| null` | |
+
+## useInfiniteQuery Options
+
+Inherits all `useQuery` options plus:
+
+| Option | Type | Default |
+|--------|------|---------|
+| `initialPageParam` | `TPageParam` | **required** |
+| `getNextPageParam` | `(lastPage, allPages, lastPageParam, allPageParams) => TPageParam \| undefined \| null` | **required** |
+| `getPreviousPageParam` | `(firstPage, allPages, firstPageParam, allPageParams) => TPageParam \| undefined \| null` | — |
+| `maxPages` | `number` | `undefined` (unlimited) |
+
+Return `undefined`/`null` from page param getters to signal no more pages. When `maxPages` is set, both `getNextPageParam` and `getPreviousPageParam` must be defined.
+
+## useInfiniteQuery Returns
+
+Inherits all `useQuery` returns plus:
+
+| Property | Type | Notes |
+|----------|------|-------|
+| `data.pages` | `TData[]` | Array of page results |
+| `data.pageParams` | `unknown[]` | Array of page params used |
+| `fetchNextPage` | `(opts?) => Promise` | |
+| `fetchPreviousPage` | `(opts?) => Promise` | |
+| `hasNextPage` | `boolean` | |
+| `hasPreviousPage` | `boolean` | |
+| `isFetchingNextPage` | `boolean` | |
+| `isFetchingPreviousPage` | `boolean` | |
+| `isFetchNextPageError` | `boolean` | |
+| `isFetchPreviousPageError` | `boolean` | |
+
+## QueryClient Methods
+
+### Constructor
+
+```tsx
+const queryClient = new QueryClient({
+  queryCache?: QueryCache,
+  mutationCache?: MutationCache,
+  defaultOptions?: {
+    queries?: QueryOptions,
+    mutations?: MutationOptions,
+    hydrate?: HydrateOptions,
+    dehydrate?: DehydrateOptions,
+  },
+})
+```
+
+### Data Access (synchronous)
+
+| Method | Signature | Notes |
+|--------|-----------|-------|
+| `getQueryData` | `(queryKey) => TData \| undefined` | |
+| `getQueriesData` | `(filters) => [QueryKey, TData \| undefined][]` | |
+| `getQueryState` | `(queryKey) => QueryState \| undefined` | |
+| `setQueryData` | `(queryKey, updater: TData \| (old => TData)) => TData \| undefined` | **Must be immutable** |
+| `setQueriesData` | `(filters, updater) => [QueryKey, TData \| undefined][]` | Only updates existing entries |
+
+### Fetching (async)
+
+| Method | Signature | Notes |
+|--------|-----------|-------|
+| `fetchQuery` | `(options) => Promise<TData>` | Returns cached data if fresh; throws on error |
+| `prefetchQuery` | `(options) => Promise<void>` | Never throws; never returns data |
+| `ensureQueryData` | `(options) => Promise<TData>` | Only fetches if not cached; `revalidateIfStale` option |
+| `fetchInfiniteQuery` | `(options) => Promise<InfiniteData>` | |
+| `prefetchInfiniteQuery` | `(options) => Promise<void>` | |
+| `ensureInfiniteQueryData` | `(options) => Promise<InfiniteData>` | |
+
+### Cache Management
+
+| Method | Signature | Notes |
+|--------|-----------|-------|
+| `invalidateQueries` | `(filters?, options?) => Promise<void>` | Marks stale + refetches active |
+| `refetchQueries` | `(filters?, options?) => Promise<void>` | |
+| `cancelQueries` | `(filters?) => Promise<void>` | |
+| `removeQueries` | `(filters?) => void` | |
+| `resetQueries` | `(filters?, options?) => Promise<void>` | Resets to initial state |
+| `clear` | `() => void` | Clears all caches |
+
+### invalidateQueries filters
+
+```tsx
+queryClient.invalidateQueries({
+  queryKey?: QueryKey,     // prefix match by default
+  exact?: boolean,         // exact key match
+  refetchType?: 'active' | 'inactive' | 'all' | 'none', // default: 'active'
+  predicate?: (query: Query) => boolean,
+})
+```
+
+### Defaults
+
+| Method | Signature |
+|--------|-----------|
+| `setQueryDefaults` | `(queryKey, options) => void` |
+| `getQueryDefaults` | `(queryKey) => QueryOptions` |
+| `setMutationDefaults` | `(mutationKey, options) => void` |
+| `getMutationDefaults` | `(mutationKey) => MutationOptions` |
+| `setDefaultOptions` | `(options) => void` |
+
+`setQueryDefaults` order matters: register from most generic to least generic key.
+
+### Status
+
+| Method | Returns |
+|--------|---------|
+| `isFetching(filters?)` | `number` — count of fetching queries |
+| `isMutating(filters?)` | `number` — count of in-flight mutations |
+
+## QueryCache
+
+```tsx
+const queryCache = new QueryCache({
+  onError?: (error, query) => void,
+  onSuccess?: (data, query) => void,
+  onSettled?: (data, error, query) => void,
+})
+```
+
+| Method | Returns |
+|--------|---------|
+| `queryCache.find(filters)` | `Query \| undefined` |
+| `queryCache.findAll(filters?)` | `Query[]` |
+| `queryCache.subscribe(callback)` | `() => void` (unsubscribe) |
+| `queryCache.clear()` | `void` |
+
+## MutationCache
+
+```tsx
+const mutationCache = new MutationCache({
+  onMutate?: (variables, mutation, context) => void,
+  onError?: (error, variables, onMutateResult, mutation, context) => void,
+  onSuccess?: (data, variables, onMutateResult, mutation, context) => void,
+  onSettled?: (data, error, variables, onMutateResult, mutation, context) => void,
+})
+```
+
+Global MutationCache callbacks **always fire** and cannot be overridden by individual mutations. If callbacks return a Promise, it is awaited.
+
+| Method | Returns |
+|--------|---------|
+| `mutationCache.getAll()` | `Mutation[]` |
+| `mutationCache.subscribe(callback)` | `() => void` |
+| `mutationCache.clear()` | `void` |
+
+## queryOptions / infiniteQueryOptions
+
+```tsx
+import { queryOptions, infiniteQueryOptions } from '@tanstack/react-query'
+
+// queryOptions — preserves type inference across useQuery, prefetchQuery, getQueryData
+const opts = queryOptions({
+  queryKey: ['groups', id],
+  queryFn: () => fetchGroups(id),
+  staleTime: 5000,
+})
+
+// infiniteQueryOptions — same for infinite queries
+const infOpts = infiniteQueryOptions({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjects(pageParam),
+  initialPageParam: 0,
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+Without `queryOptions`, `getQueryData` returns `unknown`. With it, types flow automatically.