React Query Playground with JSONPlaceholder API

Overview

This repository serves as a working example of React Query fetching data from the Fake REST API (JSONPlaceholder). The purpose of this project is to provide a base setup for experimenting with React Query, including options for caching, stale time, and query invalidation.

It is designed for personal reference and for anyone looking to quickly set up a React Query playground.

---

Features

• Fetches a list of posts from the JSONPlaceholder API using React Query, demonstrating efficient data fetching and caching.
• Adds a new post via the API’s POST method. Since the API does not persist new posts, the newly created post is temporarily appended to the list for demonstration purposes.
  • Showcases how React Query automatically re-fetches data when invalidating the correct queryKey, ensuring the latest data is retrieved from the API.
• Implements React Query with various options (caching, refetching, stale time).
• Uses React 19 and Vite
• Modular and reusable query setup for easy experimentation.

---

Tech Stack

• React 19
• React Query
• Vite
• TypeScript

---

Screenshots

---

Installation & Setup

1. Clone the repository:

git clone https://github.com/MazahirHaroon/react-query-playground.git
cd react-query-playground

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

1. View the app at:

http://localhost:5173/

---

Path Aliases

• @components: Components Directory
• @api: API Directory
• @interfaces: TS Interfaces Directory
• @constants: Constants Directory

---

External Docs

• React Query Docs
• JSONPlaceholder API
• Vite

---

Folder Structure

react-query-playground/
├── src/
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   ├── utils.ts
│   ├── api/
│   │   └── post.ts
│   ├── components/
│   │   ├── index.tsx
│   │   ├── Form/
│   │   │   ├── ... Form components
│   │   ├── Post/
│   │   │   ├── ... Form components
│   │   ├── ...Other UI Components
│   ├── constants/
│   │   └── post.ts
│   ├── hooks/
│   │   └── usePostData.tsx
│   ├── interfaces/
│   │   └── post.ts
│   ├── pages/
│   │   └── Post/
│   │       ├── content.tsx
│   │       ├── index.css
│   │       ├── index.tsx
│   │       └── options.tsx

---

License

This project is licensed under the MIT License – feel free to use, modify, and experiment with it.

---

Contributions

If you find this useful or want to add improvements, feel free to submit a PR or raise an issue.