Genie React
Workflows

TanStack Query

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

Use a connected app with the Query collector. The example key belongs to the Vite demo; choose an exact key from your own query_list result.

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 }

Read query_get again and verify simulatedState is absent. Finish by checking that real content returns in the browser. restored: 0 means this call restored no simulation; investigate the target key or session before claiming cleanup succeeded.

On this page