diff --git a/docs/reference/MutationCache.md b/docs/reference/MutationCache.md index 89613143ce..545de1ed9c 100644 --- a/docs/reference/MutationCache.md +++ b/docs/reference/MutationCache.md @@ -79,9 +79,41 @@ const callback = (event) => { const unsubscribe = mutationCache.subscribe(callback) ``` +The callback receives a discriminated union. Check `event.type` to narrow the event and access its additional properties: + +| `event.type` | When it is emitted | Properties | +| ------------------------ | --------------------------------------- | --------------------------------------------------- | +| `added` | A mutation is added to the cache | `mutation: Mutation` | +| `removed` | A mutation is removed from the cache | `mutation: Mutation` | +| `updated` | A mutation's state changes | `mutation: Mutation`, `action` | +| `observerAdded` | An observer starts observing a mutation | `mutation: Mutation`, `observer: MutationObserver` | +| `observerRemoved` | An observer stops observing a mutation | `mutation: Mutation`, `observer: MutationObserver` | +| `observerOptionsUpdated` | An observer's options change | `mutation?: Mutation`, `observer: MutationObserver` | + +When `event.type` is `updated`, `event.action.type` describes the state change: + +| `event.action.type` | State change | Additional properties | +| ------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- | +| `pending` | A mutation starts or its pending context changes | `isPaused: boolean`, `variables?: TVariables`, `context?: TOnMutateResult` | +| `success` | A mutation succeeds | `data: TData` | +| `error` | A mutation finishes with an error | `error: TError` | +| `failed` | A mutation attempt fails and may be retried | `failureCount: number`, `error: TError \| null` | +| `pause` | A mutation is paused | | +| `continue` | A paused mutation resumes | | + +For example, you can detect when a paused mutation resumes: + +```tsx +const unsubscribe = mutationCache.subscribe((event) => { + if (event.type === 'updated' && event.action.type === 'continue') { + console.log('Mutation resumed', event.mutation.mutationId) + } +}) +``` + **Options** -- `callback: (mutation?: MutationCacheNotifyEvent) => void` +- `callback: (event: MutationCacheNotifyEvent) => void` - This function will be called with the mutation cache any time it is updated. **Returns** diff --git a/docs/reference/QueryCache.md b/docs/reference/QueryCache.md index 6a341205cc..4d82382467 100644 --- a/docs/reference/QueryCache.md +++ b/docs/reference/QueryCache.md @@ -96,6 +96,41 @@ const callback = (event) => { const unsubscribe = queryCache.subscribe(callback) ``` +The callback receives a discriminated union. Check `event.type` to narrow the event and access its additional properties: + +| `event.type` | When it is emitted | Properties | +| ------------------------ | ------------------------------------ | ----------------------------------------- | +| `added` | A query is added to the cache | `query: Query` | +| `removed` | A query is removed from the cache | `query: Query` | +| `updated` | A query's state changes | `query: Query`, `action` | +| `observerAdded` | An observer starts observing a query | `query: Query`, `observer: QueryObserver` | +| `observerRemoved` | An observer stops observing a query | `query: Query`, `observer: QueryObserver` | +| `observerResultsUpdated` | An observer's current result changes | `query: Query` | +| `observerOptionsUpdated` | An observer's options change | `query: Query`, `observer: QueryObserver` | + +When `event.type` is `updated`, `event.action.type` describes the state change: + +| `event.action.type` | State change | Additional properties | +| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------------ | +| `fetch` | A fetch starts | `meta?: FetchMeta` | +| `success` | Data is written after a fetch or manual update | `data: TData \| undefined`, `dataUpdatedAt?: number`, `manual?: boolean` | +| `error` | A fetch finishes with an error | `error: TError` | +| `failed` | A fetch attempt fails and may be retried | `failureCount: number`, `error: TError` | +| `pause` | A fetch is paused | | +| `continue` | A paused fetch resumes | | +| `invalidate` | The query is invalidated | | +| `setState` | The query state is updated directly | `state: Partial>` | + +For example, you can detect when a paused query resumes: + +```tsx +const unsubscribe = queryCache.subscribe((event) => { + if (event.type === 'updated' && event.action.type === 'continue') { + console.log('Query resumed', event.query.queryKey) + } +}) +``` + **Options** - `callback: (event: QueryCacheNotifyEvent) => void`