React Query — Inkline-style JS Examples (Part 1)

Small, runnable JavaScript examples that accompany the blog:

“React Query, Part 1 — The Mental Model (with running JS examples)”
dev.to blog

No backend required — this repo uses MSW to mock /me, /me/summary, and /feed/public.

Highlights

• 100% JS (no TypeScript)
• Fetch wrapper that throws typed HttpError and sends cookies with credentials: 'include'
• Dependent queries: /me → /me/summary (gated with enabled)
• Pagination: keyset cursor feed with keepPreviousData, plus a useInfiniteQuery version
• Sensible defaults: staleTime, gcTime, retry rules, and Devtools

Directory layout

rq-inkline-examples-js-part-1/
├─ public/
│  └─ mockServiceWorker.js      # generated by npx msw init public --save
├─ src/
│  ├─ api/
│  │  ├─ client.js              # fetch wrapper (throws HttpError, credentials: ‘include’)
│  │  └─ keys.js                # central query keys (me, summary, feed, note…)
│  ├─ features/
│  │  ├─ feed/
│  │  │  └─ Feed.jsx            # keyset pagination (useQuery hybrid) + note on useInfiniteQuery
│  │  └─ me/
│  │     └─ Summary.jsx         # dependent query example (/me → /me/summary)
│  ├─ mocks/
│  │  ├─ browser.js             # MSW boot (worker.start)
│  │  └─ handlers.js            # mock handlers for /me, /me/summary, /feed/public
│  ├─ App.jsx                   # mounts  and 
│  ├─ index.css                 # minimal styles for readability
│  └─ main.jsx                  # QueryClientProvider, Devtools, and MSW startup (dev only)
├─ index.html
├─ package.json
└─ vite.config.js

Getting started

# Node 18+ (or 20+)
npm i
npm run dev
# open the printed localhost URL. MSW is started automatically in development. If you move the app under a sub-path, main.jsx computes the correct SW URL via import.meta.env.BASE_URL.

How to explore

• Devtools: toggle the React Query Devtools (bottom-right) to watch cache entries,fresh→stale transitions, and refetches.
• Summary (/me → /me/summary): in src/features/me/Summary.jsx, note how suppresses /me/summary until /me is available.
• Feed: in src/features/feed/Feed.jsx, the “hybrid” demo uses keepPreviousData: true and appends pages while guarding against duplicate application.The file includes a useInfiniteQuery version you can switch to.

Configuration

This demo doesn’t require any env vars. If you want to point at a real API: VITE_API_URL=https://api.example.com Your API must support cookie-based auth (or adjust the fetch wrapper).

Troubleshooting

• MSW service worker MIME type error
  • Make sure the generated file exists at public/mockServiceWorker.js and that Dev Server serves it.
  • Re-run: npx msw init public --save.
• Service worker not found under a sub-path.
  • The repo uses:

    const swUrl = new URL(`${import.meta.env.BASE_URL}mockServiceWorker.js`, window.location.origin)
    await worker.start({ serviceWorker: { url: swUrl.pathname } })

  • This keeps the SW registered at the right path whether your base is / or /subpath/.
• Seeing repeated “Unauthorized” (401) in the console.
  • Check that dependent queries are gated (enabled) and that auth endpoints don’t retry. Example retry strategy in main.jsx:

    retry: (count, err) => {
        const status = err?.status ?? 0
        if (status === 401 || status === 403) return false
        return count < 2
    }

License

MIT © PicciniusCodes