Skip to content
Merged
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
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ and retrieval performance.

- [Managers](./Manager.vue.md) as the first argument in [Manager.middleware](./Manager.vue.md#middleware)
- Vue with [useController()](https://dataclient.io/vue/api/useController)
- Unit testing composables with `renderDataCompose()` from `@data-client/vue/test`
- [Unit testing composables](https://dataclient.io/vue/guides/unit-testing-composables) with `renderDataCompose()` from `@data-client/vue/test`

```ts
class Controller {
Expand Down
1 change: 1 addition & 0 deletions .agents/skills/data-client-react/references.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"_useLive.md": "docs/core/shared/_useLive.mdx",
"_useLoading.md": "docs/core/shared/_useLoading.mdx",
"data-dependency.md": "docs/core/getting-started/data-dependency.md",
"devtools-debugging.md": "docs/core/getting-started/devtools-debugging.md",
"mutations.md": "docs/core/getting-started/mutations.md",
"useCache.md": "docs/core/api/useCache.md",
"useController.md": "docs/core/api/useController.md",
Expand Down
50 changes: 27 additions & 23 deletions .agents/skills/data-client-react/references/devtools-debugging.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
# Debugging Data Client with Chrome DevTools MCP
<!-- Generated by `yarn build:skills` from docs/core/getting-started/devtools-debugging.md (react). Edit the source doc, not this file. -->

Debug `@data-client/react` or `@data-client/vue` state and actions programmatically via Chrome DevTools MCP `evaluate_script`. The app's `DevToolsManager` exposes the Controller on `globalThis.__DC_CONTROLLERS__` (a `Map` keyed by `devtoolsName`) in dev mode.
# Debugging with Chrome DevTools MCP

Debug `@data-client/react` state and actions programmatically via [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) `evaluate_script`. The app's [DevToolsManager](https://dataclient.io/docs/api/DevToolsManager) exposes the [Controller](./Controller.md) on [`globalThis.__DC_CONTROLLERS__`](https://dataclient.io/docs/api/DevToolsManager#controllers) (a `Map` keyed by `devtoolsName`) in dev mode.

Agents with the [`data-client-react` skill](https://skills.sh/reactive/data-client/data-client-react) already follow these steps ([how agent debugging works](https://dataclient.io/docs/getting-started/debugging#how-agent-debugging-works)); this page is the full recipe.

## Prerequisites

1. Dev server running with `NODE_ENV !== 'production'`
2. Chrome DevTools MCP connected and page loaded
3. `DevToolsManager` included in `DataProvider` (React) or `DataClientPlugin` (Vue) managers (default in dev mode)
3. `DevToolsManager` included in `DataProvider` managers (default in dev mode)

## Step 1: Access the Controller

Expand All @@ -26,7 +30,7 @@ Debug `@data-client/react` or `@data-client/vue` state and actions programmatica

### Get a controller by key

Use the key from discovery. Always use `.get(devtoolsName)` with the actual key — not `.values().next().value` — so you target the correct store when multiple `DataProvider`s or Vue apps exist.
Use the key from discovery. Always use `.get(devtoolsName)` with the actual key — not `.values().next().value` — so you target the correct store when multiple `DataProvider`s exist. The snippets below use the first controller for brevity.

```js
// evaluate_script
Expand Down Expand Up @@ -298,30 +302,30 @@ then cross-reference with endpoint keys in state.

## Action Types Reference

| Type | Controller Method | Description |
|---|---|---|
| `rdc/fetch` | `fetch()` | Network request initiated |
| `rdc/setresponse` | `setResponse()` | Response written to cache |
| `rdc/set` | `set()` | Direct entity value set |
| `rdc/optimistic` | (automatic) | Optimistic update applied |
| `rdc/invalidate` | `invalidate()` | Single endpoint invalidated |
| `rdc/invalidateall` | `invalidateAll()` | Bulk invalidation by key test |
| `rdc/expireall` | `expireAll()` | Bulk mark-stale by key test |
| `rdc/reset` | `resetEntireStore()` | Full store reset |
| `rdc/subscribe` | `subscribe()` | Subscription registered |
| `rdc/unsubscribe` | `unsubscribe()` | Subscription removed |
| `rdc/gc` | (automatic) | Garbage collection |
| Type | Controller Method | Description |
| ------------------- | -------------------- | ----------------------------- |
| `rdc/fetch` | `fetch()` | Network request initiated |
| `rdc/setresponse` | `setResponse()` | Response written to cache |
| `rdc/set` | `set()` | Direct entity value set |
| `rdc/optimistic` | (automatic) | Optimistic update applied |
| `rdc/invalidate` | `invalidate()` | Single endpoint invalidated |
| `rdc/invalidateall` | `invalidateAll()` | Bulk invalidation by key test |
| `rdc/expireall` | `expireAll()` | Bulk mark-stale by key test |
| `rdc/reset` | `resetEntireStore()` | Full store reset |
| `rdc/subscribe` | `subscribe()` | Subscription registered |
| `rdc/unsubscribe` | `unsubscribe()` | Subscription removed |
| `rdc/gc` | (automatic) | Garbage collection |

## Controller State Readers

All take `state` (from `ctrl.getState()`) as the **last** argument.

| Method | Signature | Returns |
|---|---|---|
| `getResponse` | `(endpoint, ...args, state)` | `{ data, expiryStatus, expiresAt }` — denormalized through schema |
| `getError` | `(endpoint, ...args, state)` | `ErrorTypes \| undefined` |
| `get` | `(schema, ...args, state)` | `Denormalized \| undefined` for any Queryable schema |
| `getQueryMeta` | `(schema, ...args, state)` | `{ data, countRef }` |
| Method | Signature | Returns |
| -------------- | ---------------------------- | ----------------------------------------------------------------- |
| `getResponse` | `(endpoint, ...args, state)` | `{ data, expiryStatus, expiresAt }` — denormalized through schema |
| `getError` | `(endpoint, ...args, state)` | `ErrorTypes \| undefined` |
| `get` | `(schema, ...args, state)` | `Denormalized \| undefined` for any Queryable schema |
| `getQueryMeta` | `(schema, ...args, state)` | `{ data, countRef }` |

`expiryStatus` values: `1` = Invalid, `2` = InvalidIfStale, `3` = Valid.

Expand Down
2 changes: 1 addition & 1 deletion .agents/skills/data-client-rest/references/Fixtures.vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ Determines what the response for this mock should be. If a function it will be r

Function running is called 'collapsing' after the mechanism in [Quantum Mechanics](https://www.wondriumdaily.com/copenhagen-interpretation-of-quantum-mechanics/)

`this` can be used to store simulated server-side data. It is initialized using `getInitialInterceptorData`. It's important to not use arrow functions when using this as they disallow `this` binding.
`this` can be used to store simulated server-side data. It is initialized using [getInitialInterceptorData](https://dataclient.io/vue/guides/unit-testing-components#options). It's important to not use arrow functions when using this as they disallow `this` binding.

### fetchResponse(input, init) {#fetchResponse}

Expand Down
Loading
Loading