Explore TanStack Query and TanStack Table against any public JSON API from the browser.
Prerequisites: Node.js 20+ and npm.
npm install
npm run devProduction build output: dist/ (npm run build).
The UI runs useMutation for fetches, stores responses in the Query cache by URL (staleTime + manual actions), and feeds the JSON into useReactTable for sort, filter, pagination, and column toggles. Presets and a table/JSON toggle ship with the demo; a collapsible log records cache-related messages. There is no backend, so requests depend on each API’s CORS policy.
Query parameters update as you use the app:
| Parameter | Example | Effect |
|---|---|---|
url |
?url=https://jsonplaceholder.typicode.com/users |
Pre-loads this API |
staleTime |
?staleTime=5000 |
Stale time 5 seconds |
view |
?view=json |
JSON view instead of table |
embed |
?embed=true |
Hides chrome for iframes |
Example: ?url=https://pokeapi.co/api/v2/pokemon?limit=50&staleTime=10000&view=table
render.yaml defines a static site: npm ci && npm run build, serve dist/, SPA fallback for direct URL loads. Use the Deploy to Render badge above. No database and no secrets.
No environment variables for local dev or this static deploy.
- CORS errors in the browser: the target API must allow your origin. Use a preset that supports browser access, or call the API from your own server instead.
| Layer | Technology |
|---|---|
| Build | Vite |
| UI | React + TypeScript |
| Data | TanStack Query |
| Table | TanStack Table |
| Design | render-dds, Tailwind CSS v4 |
| Host | Render static site |
Issues and PRs: github.com/render-examples/render-tanstack-demo. Fetch and cache behavior lives under src/hooks/; UI under src/components/.
MIT