RTK Query Tutorial

A comprehensive tutorial application demonstrating RTK Query (Redux Toolkit Query) for efficient data fetching and caching in React applications. This project showcases fundamental RTK Query concepts including queries, mutations, and automatic re-fetching.

🚀 Features

• Data Fetching: Fetch posts from JSONPlaceholder API using RTK Query
• Data Creation: Create new posts with optimistic updates
• Automatic Caching: Built-in caching and background synchronization
• Loading States: Proper loading and error state management
• TypeScript Support: Fully typed with TypeScript for better development experience
• Auto Refetch: Automatic refetching when the window regains focus

🛠️ Tech Stack

• React 19 - Frontend framework
• Redux Toolkit - State management
• RTK Query - Data fetching and caching
• TypeScript - Type safety
• React Redux - React bindings for Redux
• JSONPlaceholder - Fake REST API for testing

📋 Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

🏃‍♂️ Getting Started

Installation

1. Clone the repository:

git clone <repository-url>
cd rtk-query-tutorial

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 to view the application.

📁 Project Structure

src/
├── App.tsx              # Main application component
├── store.ts             # Redux store configuration
├── types.ts             # TypeScript type definitions
├── servicers/
│   └── jsonPlaceholderApi.ts  # RTK Query API definitions
└── index.tsx            # Application entry point

🔧 Key Components

RTK Query API (jsonPlaceholderApi.ts)

Defines the API slice with:

• Base URL: JSONPlaceholder API endpoint
• getPosts Query: Fetches all posts
• createPosts Mutation: Creates new posts
• Auto-refetch: Enabled on window focus

Store Configuration (store.ts)

• Configures Redux store with RTK Query
• Sets up middleware for caching and background sync
• Enables automatic query lifecycle management

Main App (App.tsx)

• Demonstrates useGetPostsQuery hook for data fetching
• Shows useCreatePostsMutation hook for data creation
• Handles loading states and error conditions
• Provides form for creating new posts

🎯 Learning Objectives

This tutorial demonstrates:

1. Setting up RTK Query in a React application
2. Creating API slices with queries and mutations
3. Using generated hooks in React components
4. Managing loading and error states automatically
5. Implementing optimistic updates with mutations
6. Configuring automatic refetching behavior

🔄 Available Scripts

npm start

Runs the app in development mode on http://localhost:3000

npm test

Launches the test runner in interactive watch mode

npm run build

Builds the app for production to the build folder

npm run eject

Note: This is a one-way operation! Ejects from Create React App setup

🌐 API Integration

The application integrates with JSONPlaceholder, a fake REST API that provides:

• GET /posts - Retrieve all posts
• POST /posts - Create a new post

📚 RTK Query Features Demonstrated

• Automatic Caching: Queries are cached and shared across components
• Background Updates: Data refetches automatically on focus
• Optimistic Updates: UI updates immediately on mutations
• Error Handling: Built-in error state management
• Loading States: Automatic loading indicators
• TypeScript Integration: Fully typed API responses and requests

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📖 Learn More

• RTK Query Documentation
• Redux Toolkit Documentation
• React Documentation
• TypeScript Documentation

📄 License

This project is open source and available under the MIT License.