diff --git a/.agents/skills/data-client-manager/references/Actions.vue.md b/.agents/skills/data-client-manager/references/Actions.vue.md index a162d2d3a835..11446b9c5917 100644 --- a/.agents/skills/data-client-manager/references/Actions.vue.md +++ b/.agents/skills/data-client-manager/references/Actions.vue.md @@ -6,7 +6,7 @@ Actions are minimal descriptions of store updates. They are [dispatched by Controller methods](./Controller.vue.md#action-dispatchers) -> [read and consumed by Manager middleware](./Manager.vue.md#reading-and-consuming-actions) -> -processed by [reducers](https://react.dev/reference/react/useReducer) registered with [DataClientPlugin](https://dataclient.io/vue/getting-started/installation) +processed by [reducers](https://react.dev/reference/react/useReducer) registered with [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin) to update the store's state. Many actions use the same meta information: diff --git a/.agents/skills/data-client-manager/references/Manager.vue.md b/.agents/skills/data-client-manager/references/Manager.vue.md index 712242bfe6f5..8accb23a0a99 100644 --- a/.agents/skills/data-client-manager/references/Manager.vue.md +++ b/.agents/skills/data-client-manager/references/Manager.vue.md @@ -33,7 +33,7 @@ interface Manager { The only differences is that the `next()` function returns a `Promise`. This promise resolves when the reducer update is committed to the -[DataClientPlugin](https://dataclient.io/vue/getting-started/installation) store. This enables building managers that perform work with the +[DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin) store. This enables building managers that perform work with the newly computed state. Since redux is fully synchronous, an adapter must be placed in front of Reactive Data Client style middleware to @@ -53,7 +53,7 @@ Provides any cleanup of dangling resources after manager is no longer in use. ## Adding managers to Reactive Data Client {#adding} -Use the `managers` option of [DataClientPlugin](https://dataclient.io/vue/getting-started/installation). The plugin is +Use the [managers](https://dataclient.io/vue/api/DataClientPlugin#managers) option of [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin). The plugin is installed once per app, so managers are created once. ```ts title="main.ts" diff --git a/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md b/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md index a51bbe1226ad..817eecfb4363 100644 --- a/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md +++ b/.agents/skills/data-client-manager/references/getDefaultManagers.vue.md @@ -2,7 +2,7 @@ # getDefaultManagers() -`getDefaultManagers` returns an Array of [Managers](./Manager.vue.md) to be sent to [DataClientPlugin](https://dataclient.io/vue/getting-started/installation#add-provider-at-top-level-component). +`getDefaultManagers` returns an Array of [Managers](./Manager.vue.md) to be sent to [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin). This makes it simple to configure and add custom [Managers](./Manager.vue.md), while remaining robust against any potential changes to the default managers. @@ -29,8 +29,8 @@ app.mount('#app'); ``` When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments. -See [installation](https://dataclient.io/vue/getting-started/installation#add-provider-at-top-level-component) for the -other `DataClientPlugin` options. +See [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin#options) for the +other options. ## Arguments diff --git a/.agents/skills/data-client-manager/references/managers.vue.md b/.agents/skills/data-client-manager/references/managers.vue.md index 1f3094f34b13..90fec79effe2 100644 --- a/.agents/skills/data-client-manager/references/managers.vue.md +++ b/.agents/skills/data-client-manager/references/managers.vue.md @@ -200,7 +200,7 @@ export default class TabSyncManager implements Manager { Persist the store with [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) (here via [idb-keyval](https://www.npmjs.com/package/idb-keyval)); restore it with -[DataClientPlugin's `initialState` option](https://dataclient.io/vue/getting-started/installation#add-provider-at-top-level-component). IndexedDB writes are +[DataClientPlugin's `initialState` option](https://dataclient.io/vue/api/DataClientPlugin#initialState). IndexedDB writes are asynchronous and use [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) instead of blocking the main thread with JSON serialization like `localStorage` would. Debouncing writes keeps rapid action bursts cheap. Consider [expiry times](https://dataclient.io/vue/concepts/expiry-policy) diff --git a/.agents/skills/data-client-react/references/DataProvider.md b/.agents/skills/data-client-react/references/DataProvider.md index e04910c1b113..31976d215da8 100644 --- a/.agents/skills/data-client-react/references/DataProvider.md +++ b/.agents/skills/data-client-react/references/DataProvider.md @@ -91,6 +91,7 @@ interface ProviderProps { managers?: Manager[]; initialState?: State; Controller?: typeof Controller; + gcPolicy?: GCInterface; devButton?: | 'bottom-right' | 'bottom-left' @@ -114,9 +115,10 @@ export interface State { readonly meta: { readonly [key: string]: { readonly date: number; - readonly error?: ErrorTypes; + readonly fetchedAt: number; readonly expiresAt: number; readonly prevExpiresAt?: number; + readonly error?: ErrorTypes; readonly invalidated?: boolean; readonly errorPolicy?: 'hard' | 'soft' | undefined; }; @@ -179,6 +181,35 @@ const RealApp = ( ); ``` +### gcPolicy?: GCInterface {#gcPolicy} + +Removes data from the store once no component uses it and it has gone stale. Defaults to +`new GCPolicy()`. + +```tsx +import { DataProvider, GCPolicy } from '@data-client/react'; + +const gcPolicy = new GCPolicy({ intervalMS: 60 * 1000 * 10 }); + +const RealApp = ( + + + +); +``` + +```ts title="GCPolicy options" +new GCPolicy({ + // how often to sweep (default 5 minutes) + intervalMS: 60 * 1000 * 5, + // how many stale lifetimes before data is removed (default 2) + expiryMultiplier: 2, + // or choose when unused data is removed (replaces expiryMultiplier) + // here: one minute after it goes stale + expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000, +}); +``` + ### devButton In development, a small button will appear that gives easy access to [browser devtools](https://dataclient.io/docs/getting-started/debugging) if diff --git a/.agents/skills/data-client-setup/SKILL.md b/.agents/skills/data-client-setup/SKILL.md index 8981e6379fcb..ace34730f0e9 100644 --- a/.agents/skills/data-client-setup/SKILL.md +++ b/.agents/skills/data-client-setup/SKILL.md @@ -274,5 +274,6 @@ Vue projects: read `.vue.md` instead of `.md` when it exists. For detailed API documentation, see the [references](references/) directory: - [DataProvider](references/DataProvider.md) - React root provider component (Vue installs `DataClientPlugin` instead; see installation) +- [DataClientPlugin](references/DataClientPlugin.md) - Plugin options (Vue) - [installation](references/installation.md) - Installation guide - [getDefaultManagers](references/getDefaultManagers.md) - Default managers diff --git a/.agents/skills/data-client-setup/references.json b/.agents/skills/data-client-setup/references.json index b45a88570842..59ea6a6405d1 100644 --- a/.agents/skills/data-client-setup/references.json +++ b/.agents/skills/data-client-setup/references.json @@ -4,6 +4,7 @@ "vue" ], "docs": { + "DataClientPlugin.md": "docs/core/api/DataClientPlugin.vue.md", "DataProvider.md": "docs/core/api/DataProvider.md", "getDefaultManagers.md": "docs/core/api/getDefaultManagers.md", "installation.md": "docs/core/getting-started/installation.md" diff --git a/.agents/skills/data-client-setup/references/DataClientPlugin.md b/.agents/skills/data-client-setup/references/DataClientPlugin.md new file mode 100644 index 000000000000..a33a4378d24d --- /dev/null +++ b/.agents/skills/data-client-setup/references/DataClientPlugin.md @@ -0,0 +1,190 @@ + + +# DataClientPlugin + +[Vue plugin](https://vuejs.org/guide/reusability/plugins.html) that creates the store and +[Controller](https://dataclient.io/vue/api/Controller), and provides them to every component in the app. Install it once, +before `app.mount()`; composables only work in components of an app it is installed on. + +```ts title="main.ts" +import { createApp } from 'vue'; +import { DataClientPlugin } from '@data-client/vue'; +import App from './App.vue'; + +const app = createApp(App); +app.use(DataClientPlugin); +app.mount('#app'); +``` + +[Managers](https://dataclient.io/vue/api/Manager) start when the plugin is installed, and stop when the app is unmounted. + +## Options + +```ts +app.use(DataClientPlugin, options); +``` + +```typescript +interface ProvideOptions { + managers?: Manager[]; + initialState?: State; + Controller?: typeof Controller; + gcPolicy?: GCInterface; +} +``` + +### managers?: Manager\[] {#managers} + +List of [Managers](https://dataclient.io/vue/api/Manager) to use. This is the main extensibility point of the store. + +Defaults to [getDefaultManagers()](./getDefaultManagers.vue.md), which can also be used to extend the defaults. + +```ts title="main.ts" +import { DataClientPlugin, getDefaultManagers } from '@data-client/vue'; + +app.use(DataClientPlugin, { + managers: [...getDefaultManagers(), new MyManager()], +}); +``` + +Default Development: + +```typescript +[ + new DevToolsManager(), + new NetworkManager(), + new SubscriptionManager(PollingSubscription), +]; +``` + +### initialState?: State\ {#initialState} + +Instead of starting with an empty cache, you can provide your own initial state. This can +be useful for testing, or rehydrating the cache state when using server side rendering. +[mockInitialState()](https://dataclient.io/vue/api/mockInitialState) builds one from fixtures. + +```ts title="main.ts" +app.use(DataClientPlugin, { initialState: window.__INITIAL_STATE__ }); +``` + +```typescript +export interface State { + readonly entities: { + readonly [entityKey: string]: { readonly [pk: string]: T } | undefined; + }; + readonly endpoints: { + readonly [key: string]: unknown | PK[] | PK | undefined; + }; + readonly indexes: NormalizedIndex; + readonly meta: { + readonly [key: string]: { + readonly date: number; + readonly fetchedAt: number; + readonly expiresAt: number; + readonly prevExpiresAt?: number; + readonly error?: ErrorTypes; + readonly invalidated?: boolean; + readonly errorPolicy?: 'hard' | 'soft' | undefined; + }; + }; + readonly entitiesMeta: { + readonly [entityKey: string]: { + readonly [pk: string]: { + readonly date: number; + readonly expiresAt: number; + readonly fetchedAt: number; + }; + }; + }; + readonly optimistic: (SetResponseAction | OptimisticAction)[]; + readonly lastReset: number; +} +``` + +### Controller?: typeof Controller {#Controller} + +This allows you to extend [Controller](https://dataclient.io/vue/api/Controller) to provide additional functionality. +This might be useful if you have additional actions you want to dispatch to custom [Managers](https://dataclient.io/vue/api/Manager). + +```ts title="main.ts" +import { Controller, DataClientPlugin } from '@data-client/vue'; + +class MyController extends Controller { + doSomething = () => { + console.log('hi'); + }; +} + +app.use(DataClientPlugin, { Controller: MyController }); +``` + +[useController()](https://dataclient.io/vue/api/useController) and `$dataClient` then return a `MyController` instance; +cast to use its additional members. + +### gcPolicy?: GCInterface {#gcPolicy} + +Removes data from the store once no component uses it and it has gone stale. By default, nothing +is ever removed. + +```ts title="main.ts" +import { DataClientPlugin, GCPolicy } from '@data-client/vue'; + +app.use(DataClientPlugin, { + // sweep every 10 minutes + gcPolicy: new GCPolicy({ intervalMS: 60 * 1000 * 10 }), +}); +``` + +```ts title="GCPolicy options" +new GCPolicy({ + // how often to sweep (default 5 minutes) + intervalMS: 60 * 1000 * 5, + // how many stale lifetimes before data is removed (default 2) + expiryMultiplier: 2, + // or choose when unused data is removed (replaces expiryMultiplier) + // here: one minute after it goes stale + expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000, +}); +``` + +## $dataClient {#dataclient} + +The plugin also adds the [Controller](https://dataclient.io/vue/api/Controller) as the `$dataClient` global property, so +templates and Options API components can use it without [useController()](https://dataclient.io/vue/api/useController). + +```html title="DeleteTodo.vue" + + + +``` + +## Using composables + +Composables like [useSuspense()](https://dataclient.io/vue/api/useSuspense) must run during a component's `setup`, so Vue +knows which app's store to use. Awaiting them requires ` +``` + +Components that `await` must render inside a [``](https://vuejs.org/guide/built-ins/suspense.html) +boundary. diff --git a/.agents/skills/data-client-setup/references/DataProvider.md b/.agents/skills/data-client-setup/references/DataProvider.md index 73cee8e5d20a..0f8cad55d075 100644 --- a/.agents/skills/data-client-setup/references/DataProvider.md +++ b/.agents/skills/data-client-setup/references/DataProvider.md @@ -91,6 +91,7 @@ interface ProviderProps { managers?: Manager[]; initialState?: State; Controller?: typeof Controller; + gcPolicy?: GCInterface; devButton?: | 'bottom-right' | 'bottom-left' @@ -114,9 +115,10 @@ export interface State { readonly meta: { readonly [key: string]: { readonly date: number; - readonly error?: ErrorTypes; + readonly fetchedAt: number; readonly expiresAt: number; readonly prevExpiresAt?: number; + readonly error?: ErrorTypes; readonly invalidated?: boolean; readonly errorPolicy?: 'hard' | 'soft' | undefined; }; @@ -179,6 +181,35 @@ const RealApp = ( ); ``` +### gcPolicy?: GCInterface {#gcPolicy} + +Removes data from the store once no component uses it and it has gone stale. Defaults to +`new GCPolicy()`. + +```tsx +import { DataProvider, GCPolicy } from '@data-client/react'; + +const gcPolicy = new GCPolicy({ intervalMS: 60 * 1000 * 10 }); + +const RealApp = ( + + + +); +``` + +```ts title="GCPolicy options" +new GCPolicy({ + // how often to sweep (default 5 minutes) + intervalMS: 60 * 1000 * 5, + // how many stale lifetimes before data is removed (default 2) + expiryMultiplier: 2, + // or choose when unused data is removed (replaces expiryMultiplier) + // here: one minute after it goes stale + expiresAt: ({ expiresAt }) => expiresAt + 60 * 1000, +}); +``` + ### devButton In development, a small button will appear that gives easy access to [browser devtools](https://dataclient.io/docs/getting-started/debugging) if diff --git a/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md b/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md index 362ad7d84a3f..299d18b75867 100644 --- a/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md +++ b/.agents/skills/data-client-setup/references/getDefaultManagers.vue.md @@ -2,7 +2,7 @@ # getDefaultManagers() -`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./installation.vue.md#add-provider-at-top-level-component). +`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./DataClientPlugin.md). This makes it simple to configure and add custom [Managers](https://dataclient.io/vue/api/Manager), while remaining robust against any potential changes to the default managers. @@ -29,8 +29,8 @@ app.mount('#app'); ``` When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments. -See [installation](./installation.vue.md#add-provider-at-top-level-component) for the -other `DataClientPlugin` options. +See [DataClientPlugin](./DataClientPlugin.md#options) for the +other options. ## Arguments diff --git a/.agents/skills/data-client-setup/references/installation.vue.md b/.agents/skills/data-client-setup/references/installation.vue.md index 7d256c0dc00e..dcd8b51db7c8 100644 --- a/.agents/skills/data-client-setup/references/installation.vue.md +++ b/.agents/skills/data-client-setup/references/installation.vue.md @@ -31,6 +31,8 @@ app.use(DataClientPlugin, { app.mount('#app'); ``` +See [DataClientPlugin](./DataClientPlugin.md) for all options. + [Next: Define Data »](https://dataclient.io/vue/getting-started/resource) ## Example diff --git a/.agents/skills/data-client-vue-testing/references/mockInitialState.md b/.agents/skills/data-client-vue-testing/references/mockInitialState.md index 923759fbce67..22fd204102c5 100644 --- a/.agents/skills/data-client-vue-testing/references/mockInitialState.md +++ b/.agents/skills/data-client-vue-testing/references/mockInitialState.md @@ -22,7 +22,7 @@ export type Fixture = SuccessFixture | ErrorFixture; This prop specifies the [fixtures](./Fixtures.md) to use data from. Each item represents a fetch defined by the [Endpoint](https://dataclient.io/rest/api/Endpoint) and params. `Result` contains the JSON response expected from said fetch. -This can be used as the `initialState` option for [DataClientPlugin](https://dataclient.io/vue/getting-started/installation) +This can be used as the [initialState option](https://dataclient.io/vue/api/DataClientPlugin#initialState) for [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin) ## Example diff --git a/.agents/skills/data-client-vue/SKILL.md b/.agents/skills/data-client-vue/SKILL.md index 1ddcf0360a45..07a5ea11c08d 100644 --- a/.agents/skills/data-client-vue/SKILL.md +++ b/.agents/skills/data-client-vue/SKILL.md @@ -5,7 +5,7 @@ license: Apache 2.0 --- ## Setup -Install `DataClientPlugin` once with `app.use(DataClientPlugin)` ([installation](references/installation.md); +Install [DataClientPlugin](references/DataClientPlugin.md) once with `app.use(DataClientPlugin)` ([installation](references/installation.md); apply the skill "data-client-setup" to set it up). Composables only work inside ` + + +``` + +## Using composables + +Composables like [useSuspense()](./useSuspense.md) must run during a component's `setup`, so Vue +knows which app's store to use. Awaiting them requires ` +``` + +Components that `await` must render inside a [``](https://vuejs.org/guide/built-ins/suspense.html) +boundary. diff --git a/.agents/skills/data-client-vue/references/getDefaultManagers.md b/.agents/skills/data-client-vue/references/getDefaultManagers.md index 79cc0d6e9040..299d18b75867 100644 --- a/.agents/skills/data-client-vue/references/getDefaultManagers.md +++ b/.agents/skills/data-client-vue/references/getDefaultManagers.md @@ -2,7 +2,7 @@ # getDefaultManagers() -`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./installation.md#add-provider-at-top-level-component). +`getDefaultManagers` returns an Array of [Managers](https://dataclient.io/vue/api/Manager) to be sent to [DataClientPlugin](./DataClientPlugin.md). This makes it simple to configure and add custom [Managers](https://dataclient.io/vue/api/Manager), while remaining robust against any potential changes to the default managers. @@ -29,8 +29,8 @@ app.mount('#app'); ``` When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments. -See [installation](./installation.md#add-provider-at-top-level-component) for the -other `DataClientPlugin` options. +See [DataClientPlugin](./DataClientPlugin.md#options) for the +other options. ## Arguments diff --git a/.agents/skills/data-client-vue/references/installation.md b/.agents/skills/data-client-vue/references/installation.md index 7d256c0dc00e..dcd8b51db7c8 100644 --- a/.agents/skills/data-client-vue/references/installation.md +++ b/.agents/skills/data-client-vue/references/installation.md @@ -31,6 +31,8 @@ app.use(DataClientPlugin, { app.mount('#app'); ``` +See [DataClientPlugin](./DataClientPlugin.md) for all options. + [Next: Define Data »](https://dataclient.io/vue/getting-started/resource) ## Example diff --git a/.agents/skills/data-client-vue/references/useController.md b/.agents/skills/data-client-vue/references/useController.md index 6ad0b73f00d9..64807e997135 100644 --- a/.agents/skills/data-client-vue/references/useController.md +++ b/.agents/skills/data-client-vue/references/useController.md @@ -29,8 +29,8 @@ and [setResponse](./Controller.md#setResponse) ``` `useController()` must be called inside ` + + +``` + +## Using composables + +Composables like [useSuspense()](./useSuspense.md) must run during a component's `setup`, so Vue +knows which app's store to use. Awaiting them requires ` +``` + +Components that `await` must render inside a [``](https://vuejs.org/guide/built-ins/suspense.html) +boundary. diff --git a/docs/core/api/DataProvider.md b/docs/core/api/DataProvider.md index 1faf202536a6..955611ec4dec 100644 --- a/docs/core/api/DataProvider.md +++ b/docs/core/api/DataProvider.md @@ -6,6 +6,8 @@ description: High performance, globally consistent data management in React --- import Installation from '../shared/\_installation.mdx'; +import StateType from '../shared/_state_type.mdx'; +import GCPolicyOptions from '../shared/_gc_policy.mdx'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -25,6 +27,7 @@ interface ProviderProps { managers?: Manager[]; initialState?: State; Controller?: typeof Controller; + gcPolicy?: GCInterface; devButton?: | 'bottom-right' | 'bottom-left' @@ -36,38 +39,7 @@ interface ProviderProps { ### initialState: State<unknown\> {#initialState} -```typescript -export interface State { - readonly entities: { - readonly [entityKey: string]: { readonly [pk: string]: T } | undefined; - }; - readonly endpoints: { - readonly [key: string]: unknown | PK[] | PK | undefined; - }; - readonly indexes: NormalizedIndex; - readonly meta: { - readonly [key: string]: { - readonly date: number; - readonly error?: ErrorTypes; - readonly expiresAt: number; - readonly prevExpiresAt?: number; - readonly invalidated?: boolean; - readonly errorPolicy?: 'hard' | 'soft' | undefined; - }; - }; - readonly entitiesMeta: { - readonly [entityKey: string]: { - readonly [pk: string]: { - readonly date: number; - readonly expiresAt: number; - readonly fetchedAt: number; - }; - }; - }; - readonly optimistic: (SetResponseAction | OptimisticAction)[]; - readonly lastReset: number; -} -``` + Instead of starting with an empty cache, you can provide your own initial state. This can be useful for testing, or rehydrating the cache state when using server side rendering. @@ -113,6 +85,25 @@ const RealApp = ( ); ``` +### gcPolicy?: GCInterface {#gcPolicy} + +Removes data from the store once no component uses it and it has gone stale. Defaults to +`new GCPolicy()`. + +```tsx +import { DataProvider, GCPolicy } from '@data-client/react'; + +const gcPolicy = new GCPolicy({ intervalMS: 60 * 1000 * 10 }); + +const RealApp = ( + + + +); +``` + + + ### devButton diff --git a/docs/core/api/DevToolsManager.md b/docs/core/api/DevToolsManager.md index cfb8a583a91b..3514d7968ac6 100644 --- a/docs/core/api/DevToolsManager.md +++ b/docs/core/api/DevToolsManager.md @@ -169,7 +169,7 @@ __DC_CONTROLLERS__.get('Data Client: My App').getState(); This is useful for AI coding assistants using the [Chrome DevTools MCP](https://developer.chrome.com/blog/chrome-devtools-mcp) or [Expo MCP](https://docs.expo.dev/eas/ai/mcp/) to programmatically inspect and interact -with the store. Each :react[[DataProvider](/docs/api/DataProvider)]:vue[installed DataClientPlugin] registers independently, so +with the store. Each :react[[DataProvider](/docs/api/DataProvider)]:vue[installed [DataClientPlugin](./DataClientPlugin.md)] registers independently, so multiple :react[providers]:vue[apps] on the same page are fully supported. Controllers are removed from the map when `cleanup()` is called. diff --git a/docs/core/api/Manager.md b/docs/core/api/Manager.md index ef3bb712969f..08b3892d9837 100644 --- a/docs/core/api/Manager.md +++ b/docs/core/api/Manager.md @@ -57,7 +57,7 @@ managers that perform work after the DOM is updated and also with the newly comp :::vue This promise resolves when the reducer update is committed to the -[DataClientPlugin](../getting-started/installation.md) store. This enables building managers that perform work with the +[DataClientPlugin](./DataClientPlugin.md) store. This enables building managers that perform work with the newly computed state. ::: @@ -89,7 +89,7 @@ have internal state, so it is important to not constantly recreate them. :::vue -Use the `managers` option of [DataClientPlugin](../getting-started/installation.md). The plugin is +Use the [managers](./DataClientPlugin.md#managers) option of [DataClientPlugin](./DataClientPlugin.md). The plugin is installed once per app, so managers are created once. ::: diff --git a/docs/core/api/getDefaultManagers.md b/docs/core/api/getDefaultManagers.md index e4358106aee1..dbd18870a33c 100644 --- a/docs/core/api/getDefaultManagers.md +++ b/docs/core/api/getDefaultManagers.md @@ -8,7 +8,7 @@ import StackBlitz from '@site/src/components/StackBlitz'; # getDefaultManagers() -`getDefaultManagers` returns an Array of [Managers](./Manager.md) to be sent to :react[[<DataProvider />](./DataProvider.md)]:vue[[DataClientPlugin](../getting-started/installation.md#add-provider-at-top-level-component)]. +`getDefaultManagers` returns an Array of [Managers](./Manager.md) to be sent to :react[[<DataProvider />](./DataProvider.md)]:vue[[DataClientPlugin](./DataClientPlugin.md)]. This makes it simple to configure and add custom [Managers](./Manager.md), while remaining robust against any potential changes to the default managers. @@ -63,8 +63,8 @@ app.mount('#app'); ``` When `managers` is omitted, `DataClientPlugin` uses `getDefaultManagers()` with no arguments. -See [installation](../getting-started/installation.md#add-provider-at-top-level-component) for the -other `DataClientPlugin` options. +See [DataClientPlugin](./DataClientPlugin.md#options) for the +other options. ::: diff --git a/docs/core/api/mockInitialState.md b/docs/core/api/mockInitialState.md index 3d4250155640..39e3c44a8815 100644 --- a/docs/core/api/mockInitialState.md +++ b/docs/core/api/mockInitialState.md @@ -22,7 +22,7 @@ export type Fixture = SuccessFixture | ErrorFixture; This prop specifies the [fixtures](./Fixtures.md) to use data from. Each item represents a fetch defined by the [Endpoint](/rest/api/Endpoint) and params. `Result` contains the JSON response expected from said fetch. -This can be used as the :react[initialState prop for [<DataProvider /\>](./DataProvider)]:vue[`initialState` option for [DataClientPlugin](../getting-started/installation.md)] +This can be used as the :react[initialState prop for [<DataProvider /\>](./DataProvider)]:vue[[initialState option](./DataClientPlugin.md#initialState) for [DataClientPlugin](./DataClientPlugin.md)] ## Example diff --git a/docs/core/api/useController.md b/docs/core/api/useController.md index 578cbc2b4553..a0e5b5df60ed 100644 --- a/docs/core/api/useController.md +++ b/docs/core/api/useController.md @@ -76,8 +76,8 @@ function MyComponent({ id }) { ``` `useController()` must be called inside `