calypso-react-query-migration

Create a fetcher in packages/api-core/src/read-{name}/fetchers.ts using wpcom from ../wpcom-fetcher, add query options in packages/api-queries/src/read-{name}.ts with queryOptions, then update consumers to call useQuery. Audit all CRUD actions first and write a plan before editing.

Swap the data-stores hook import for useQuery with the matching read{Name}Query from @automattic/api-queries, preserving the same queryKey for mid-session cache compatibility. No bridge component is needed, and the migration lands in a single commit.

Keep the bridge when many consumers or cross-codebase selectors still read the Redux slice, and record the reason in the plan. Remove it when only one to three function components consume the data, adapting them to useQuery directly.

Stale data usually means missing cache invalidation or an orphaned query key. Mutations need invalidateQueries or removeQueries in onSuccess, and any key change requires updating every consumer found by grepping for the old key segment.

Yes, default to optimistic updates for user-facing mutations using onMutate with cancelQueries, a snapshot for rollback, and onSettled invalidation. Skip them only when results depend on server-computed values the client cannot predict.

Hooks cannot run inside class components, so wrap the class in a functional HOC that calls useQuery and forwards results as props. Do not rewrite class components to function components as part of a data migration.