calypso-react-query-migration
Installation
SKILL.md
Calypso React Query Migration
Target architecture: fetchers in @automattic/api-core → query/mutation options in @automattic/api-queries → components call useQuery() / useMutation() directly.
Two source patterns migrate into it:
- Redux data-layer (
dispatchRequest+httpactions inclient/state/data-layer/wpcom/read/) @automattic/data-storesReader hooks (custom hooks usingwpcomRequest)
Quick Reference: Where Things Go
| What | Where |
|---|---|
| API fetcher | packages/api-core/src/read-{name}/fetchers.ts |
| Mutators | packages/api-core/src/read-{name}/mutators.ts |
| Response types | packages/api-core/src/read-{name}/types.ts |
| Barrel | packages/api-core/src/read-{name}/index.ts + add to packages/api-core/src/index.ts |
| Query/mutation options | packages/api-queries/src/read-{name}.ts + add to packages/api-queries/src/index.ts |
| Bridge component (if kept) | client/components/data/query-reader-{name}/index.tsx |
| Component tests | client/components/data/query-reader-{name}/test/index.test.tsx |
Related skills
More from automattic/wp-calypso
dashboard-create-screen
Create a new screen in the Multi-site Dashboard with automatic route registration
55help-center-ui-test
Run a browser-based UI review of the WordPress.com Help Center across multiple surfaces, looking for visual and behavioral issues. Use when asked to test the Help Center UI.
6fix-e2e-tests
Given a wp-calypso PR number, identify the failing E2E test(s) in that PR's CI run so they can be fixed. Use when asked to investigate or fix a failing E2E test on a specific PR.
1