Genie React
Workflows

TanStack Query

Read cache state, wait for one exact key, and test loading or error UI.

List and select

npx @genie-react/cli call query_list \
  '{"limit":20}' --fields queryHash,status,fetchStatus
{
  "queryHash": "[\"demo\",\"greeting\"]",
  "status": "success",
  "fetchStatus": "idle"
}

Read one exact key:

npx @genie-react/cli call query_get \
  '{"queryKey":["demo","greeting"]}' --json

Wait without sleeping

npx @genie-react/cli call devtools_wait \
  '{"condition":"query-settled","queryKey":["demo","greeting"],"timeoutMs":10000}' --json

Example output:

{
  "ok": true,
  "waitedMs": 42,
  "query": {
    "queryHash": "[\"demo\",\"greeting\"]",
    "queryKey": ["demo", "greeting"]
  }
}

Test a state

Hold the real query in pending state:

npx @genie-react/cli call query_simulate_state \
  '{"queryKey":["demo","greeting"],"state":"pending"}'
ok=true · queryHash="[\"demo\",\"greeting\"]" · simulatedState="pending" · originalStatus="success"

Drive the page and verify the skeleton, layout, and accessible status. Then restore it:

npx @genie-react/cli call query_restore_state \
  '{"queryKey":["demo","greeting"]}'
ok=true · restored=1

Agent outcome

The agent can verify the cache and the rendered UI in one flow. It can hold brief loading or error states long enough to inspect them, then return the cache to its real state.

On this page