Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions docs/framework/react/plugins/broadcastQueryClient.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,20 +44,22 @@ An object of options:
interface BroadcastQueryClientOptions {
/** The QueryClient to sync */
queryClient: QueryClient
/** This is the unique channel name that will be used
* to communicate between tabs and windows */
/**
* This is the unique channel name that will be used to communicate between
* tabs and windows
*/
broadcastChannel?: string
/** Options for the BroadcastChannel API */
options?: BroadcastChannelOptions
/**
* Called when a query event fails to broadcast to other tabs — most
* commonly because the query's data, error, or key contains a value the
* structured-clone algorithm cannot serialize (e.g. `ReadableStream`,
* `File`, functions, Vue `reactive` proxies).
* Called when a query event fails to broadcast to other tabs — most commonly
* because the query's data, error, or key contains a value the
* structured-clone algorithm cannot serialize (e.g. `ReadableStream`, `File`,
* functions, Vue `reactive` proxies).
*
* If omitted, a `console.warn` is emitted in development so failures
* are never entirely silent. May return a `Promise`; any rejection is
* caught internally.
* If omitted, a `console.warn` is emitted in development so failures are
* never entirely silent. May return a `Promise`; any rejection is caught
* internally.
*/
onBroadcastError?: (
error: unknown,
Expand Down
8 changes: 5 additions & 3 deletions docs/framework/react/plugins/createAsyncStoragePersister.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,16 @@ interface CreateAsyncStoragePersisterOptions {
storage: AsyncStorage | undefined | null
/** The key to use when storing the cache to localStorage */
key?: string
/** To avoid localStorage spamming,
* pass a time in ms to throttle saving the cache to disk */
/**
* To avoid localStorage spamming, pass a time in ms to throttle saving the
* cache to disk
*/
throttleTime?: number
/** How to serialize the data to storage */
serialize?: (client: PersistedClient) => MaybePromise<string>
/** How to deserialize the data from storage */
deserialize?: (cachedString: string) => MaybePromise<PersistedClient>
/** How to retry persistence on error **/
/** How to retry persistence on error * */
retry?: AsyncPersistRetryer
}

Expand Down
29 changes: 15 additions & 14 deletions docs/framework/react/plugins/createPersister.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,17 +153,20 @@ experimental_createQueryPersister(options: StoragePersisterOptions)

```tsx
export interface StoragePersisterOptions {
/** The storage client used for setting and retrieving items from cache.
* For SSR pass in `undefined`.
/**
* The storage client used for setting and retrieving items from cache. For
* SSR pass in `undefined`.
*/
storage: AsyncStorage | Storage | undefined | null
/**
* How to serialize the data to storage.
*
* @default `JSON.stringify`
*/
serialize?: (persistedQuery: PersistedQuery) => string
/**
* How to deserialize the data from storage.
*
* @default `JSON.parse`
*/
deserialize?: (cachedString: string) => PersistedQuery
Expand All @@ -173,27 +176,25 @@ export interface StoragePersisterOptions {
*/
buster?: string
/**
* The max-allowed age of the cache in milliseconds.
* If a persisted cache is found that is older than this
* time, it will be discarded
* The max-allowed age of the cache in milliseconds. If a persisted cache is
* found that is older than this time, it will be discarded
*
* @default 24 hours
*/
maxAge?: number
/**
* Prefix to be used for storage key.
* Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
* Prefix to be used for storage key. Storage key is a combination of prefix
* and query hash in a form of `prefix-queryHash`.
*/
prefix?: string
/**
* If set to `true`, the query will refetch on successful query restoration if the data is stale.
* If set to `false`, the query will not refetch on successful query restoration.
* If set to `'always'`, the query will always refetch on successful query restoration.
* Defaults to `true`.
* If set to `true`, the query will refetch on successful query restoration if
* the data is stale. If set to `false`, the query will not refetch on
* successful query restoration. If set to `'always'`, the query will always
* refetch on successful query restoration. Defaults to `true`.
*/
refetchOnRestore?: boolean | 'always'
/**
* Filters to narrow down which Queries should be persisted.
*/
/** Filters to narrow down which Queries should be persisted. */
filters?: QueryFilters
}

Expand Down
10 changes: 6 additions & 4 deletions docs/framework/react/plugins/createSyncStoragePersister.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,18 +105,20 @@ createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)

```tsx
interface CreateSyncStoragePersisterOptions {
/** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
/**
* The storage client used for setting an retrieving items from cache
* (window.localStorage or window.sessionStorage)
*/
storage: Storage | undefined | null
/** The key to use when storing the cache */
key?: string
/** To avoid spamming,
* pass a time in ms to throttle saving the cache to disk */
/** To avoid spamming, pass a time in ms to throttle saving the cache to disk */
throttleTime?: number
/** How to serialize the data to storage */
serialize?: (client: PersistedClient) => string
/** How to deserialize the data from storage */
deserialize?: (cachedString: string) => PersistedClient
/** How to retry persistence on error **/
/** How to retry persistence on error * */
retry?: PersistRetryer
}
```
Expand Down
34 changes: 22 additions & 12 deletions docs/framework/react/plugins/persistQueryClient.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,22 +133,31 @@ All options available are as follows:
interface PersistQueryClientOptions {
/** The QueryClient to persist */
queryClient: QueryClient
/** The Persister interface for storing and restoring the cache
* to/from a persisted location */
/**
* The Persister interface for storing and restoring the cache to/from a
* persisted location
*/
persister: Persister
/** The max-allowed age of the cache in milliseconds.
* If a persisted cache is found that is older than this
* time, it will be **silently** discarded
* (defaults to 24 hours) */
/**
* The max-allowed age of the cache in milliseconds. If a persisted cache is
* found that is older than this time, it will be **silently** discarded
* (defaults to 24 hours)
*/
maxAge?: number
/** A unique string that can be used to forcefully
* invalidate existing caches if they do not share the same buster string */
/**
* A unique string that can be used to forcefully invalidate existing caches
* if they do not share the same buster string
*/
buster?: string
/** The options passed to the hydrate function
* Not used on `persistQueryClientSave` or `persistQueryClientSubscribe` */
/**
* The options passed to the hydrate function Not used on
* `persistQueryClientSave` or `persistQueryClientSubscribe`
*/
hydrateOptions?: HydrateOptions
/** The options passed to the dehydrate function
* Not used on `persistQueryClientRestore` */
/**
* The options passed to the dehydrate function Not used on
* `persistQueryClientRestore`
*/
dehydrateOptions?: DehydrateOptions
}
```
Expand Down Expand Up @@ -274,6 +283,7 @@ import {

/**
* Creates an Indexed DB persister
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
*/
export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
Expand Down
29 changes: 15 additions & 14 deletions docs/framework/vue/plugins/createPersister.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,17 +150,20 @@ experimental_createQueryPersister(options: StoragePersisterOptions)

```tsx
export interface StoragePersisterOptions {
/** The storage client used for setting and retrieving items from cache.
* For SSR pass in `undefined`.
/**
* The storage client used for setting and retrieving items from cache. For
* SSR pass in `undefined`.
*/
storage: AsyncStorage | Storage | undefined | null
/**
* How to serialize the data to storage.
*
* @default `JSON.stringify`
*/
serialize?: (persistedQuery: PersistedQuery) => string
/**
* How to deserialize the data from storage.
*
* @default `JSON.parse`
*/
deserialize?: (cachedString: string) => PersistedQuery
Expand All @@ -170,27 +173,25 @@ export interface StoragePersisterOptions {
*/
buster?: string
/**
* The max-allowed age of the cache in milliseconds.
* If a persisted cache is found that is older than this
* time, it will be discarded
* The max-allowed age of the cache in milliseconds. If a persisted cache is
* found that is older than this time, it will be discarded
*
* @default 24 hours
*/
maxAge?: number
/**
* Prefix to be used for storage key.
* Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
* Prefix to be used for storage key. Storage key is a combination of prefix
* and query hash in a form of `prefix-queryHash`.
*/
prefix?: string
/**
* If set to `true`, the query will refetch on successful query restoration if the data is stale.
* If set to `false`, the query will not refetch on successful query restoration.
* If set to `'always'`, the query will always refetch on successful query restoration.
* Defaults to `true`.
* If set to `true`, the query will refetch on successful query restoration if
* the data is stale. If set to `false`, the query will not refetch on
* successful query restoration. If set to `'always'`, the query will always
* refetch on successful query restoration. Defaults to `true`.
*/
refetchOnRestore?: boolean | 'always'
/**
* Filters to narrow down which Queries should be persisted.
*/
/** Filters to narrow down which Queries should be persisted. */
filters?: QueryFilters
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/**
* MockApiInterceptor is used to simulate API responses for `/api/tasks` endpoints.
* It handles the following operations:
* MockApiInterceptor is used to simulate API responses for `/api/tasks`
* endpoints. It handles the following operations:
*
* - GET: Fetches all tasks from localStorage.
* - POST: Adds a new task to localStorage.
* - DELETE: Clears all tasks from localStorage.
* Simulated responses include a delay to mimic network latency.
* - DELETE: Clears all tasks from localStorage. Simulated responses include a
* delay to mimic network latency.
*/
import { HttpResponse } from '@angular/common/http'
import { delay, of } from 'rxjs'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ export class TasksService {
readonly #http = inject(HttpClient) // Handles HTTP requests

/**
* Fetches all tasks from the API.
* Returns an observable containing an array of task strings.
* Fetches all tasks from the API. Returns an observable containing an array
* of task strings.
*/
allTasks = (intervalMs: number) =>
queryOptions({
Expand All @@ -29,8 +29,8 @@ export class TasksService {
})

/**
* Creates a mutation for adding a task.
* On success, invalidates and refetches the "tasks" query cache to update the task list.
* Creates a mutation for adding a task. On success, invalidates and refetches
* the "tasks" query cache to update the task list.
*/
addTask() {
return mutationOptions({
Expand All @@ -44,8 +44,8 @@ export class TasksService {
}

/**
* Creates a mutation for clearing all tasks.
* On success, invalidates and refetches the "tasks" query cache to ensure consistency.
* Creates a mutation for clearing all tasks. On success, invalidates and
* refetches the "tasks" query cache to ensure consistency.
*/
clearAllTasks() {
return mutationOptions({
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
/**
* MockApiInterceptor is used to simulate API responses for `/api/tasks` endpoints.
* It handles the following operations:
* MockApiInterceptor is used to simulate API responses for `/api/tasks`
* endpoints. It handles the following operations:
*
* - GET: Fetches all tasks from sessionStorage.
* - POST: Adds a new task to sessionStorage.
* Simulated responses include a delay to mimic network latency.
* - POST: Adds a new task to sessionStorage. Simulated responses include a delay
* to mimic network latency.
*/
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
import { delay, of, switchMap, throwError, timer } from 'rxjs'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ export class TasksService {
#http = inject(HttpClient) // Handles HTTP requests

/**
* Fetches all tasks from the API.
* Returns an observable containing an array of task strings.
* Fetches all tasks from the API. Returns an observable containing an array
* of task strings.
*/
allTasks = () =>
queryOptions({
Expand All @@ -28,8 +28,8 @@ export class TasksService {
})

/**
* Creates a mutation for adding a task.
* On success, invalidates and refetches the "tasks" query cache to update the task list.
* Creates a mutation for adding a task. On success, invalidates and refetches
* the "tasks" query cache to update the task list.
*/
addTask() {
return mutationOptions({
Expand Down
16 changes: 8 additions & 8 deletions examples/react/offline/public/mockServiceWorker.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

/**
* Mock Service Worker.
*
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
*/
Expand Down Expand Up @@ -179,10 +180,11 @@ async function handleRequest(event, requestId, requestInterceptedAt) {
}

/**
* Resolve the main client for the given event.
* Client that issues a request doesn't necessarily equal the client
* that registered the worker. It's with the latter the worker should
* communicate with during the response resolving phase.
* Resolve the main client for the given event. Client that issues a request
* doesn't necessarily equal the client that registered the worker. It's with
* the latter the worker should communicate with during the response resolving
* phase.
*
* @param {FetchEvent} event
* @returns {Promise<Client | undefined>}
*/
Expand Down Expand Up @@ -294,7 +296,7 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
/**
* @param {Client} client
* @param {any} message
* @param {Array<Transferable>} transferrables
* @param {Transferable[]} transferrables
* @returns {Promise<any>}
*/
function sendToClient(client, message, transferrables = []) {
Expand Down Expand Up @@ -339,9 +341,7 @@ function respondWithMock(response) {
return mockedResponse
}

/**
* @param {Request} request
*/
/** @param {Request} request */
async function serializeRequest(request) {
return {
url: request.url,
Expand Down
Loading
Loading