README.md

Mastering Data Fetching and Mutations in React: A Practical Guide

If you find this project useful, please consider starring the repository to help others discover it!

Prerequisites

1. Node.js: Ensure Node.js v22+ is installed.

2. Corepack: Enable Corepack to manage package managers like pnpm.

   corepack enable

Getting Started

1. Install dependencies:

   pnpm install

2. Start development servers:

   pnpm dev

3. Navigate to different topics by ports:

   Each example runs on a different port (4000 - 4009). The JSON server is available on port 3000, providing mock data for the examples.

   Port	Topic	Description
   3000	Json Server	Mock json server
   4000	Basic Query CSR	Basic CSR query setup
   4001	React Query CSR	React Query CSR query setup
   4002	Basic Mutation CSR	Basic CSR mutation setup
   4003	React Query Mutation CSR	React Query CSR mutation setup
   4004	Basic CSR	Basic CSR setup
   4005	React Query CSR	React Query CSR setup
   4006	Basic SSR	Basic SSR setup
   4007	React Query SSR	React Query SSR setup
   4008	Optimistic Update	React Query optimistic updates without cache setup
   4009	Infinite Scrolling	React Query infinite scrolling setup

4. API Server:

   A mock JSON server is available on port 3000, serving data for all examples.

   pnpm --filter=server dev

Running in Production

To deploy in production mode, follow these steps:

1. Build apps:

   pnpm build

2. Start production servers:

   pnpm start

Directory Structure

Each subfolder under apps/ represents a specific topic and contains all relevant code and assets:

apps/
├── 1-query-basic-csr/
├── 2-query-react-query-csr/
├── 3-mutation-basic-csr/
├── 4-mutation-react-query-csr/
├── 5-basic-csr/
├── 6-react-query-csr/
├── 7-basic-ssr/
├── 8-react-query-ssr/
├── 9-optimistic-update/
└── 10-infinite-scrolling/

Disclaimer

The contents of this repository are based on my personal experiences and opinions. While I strive to provide accurate and helpful information, there may be mistakes or oversights. I encourage readers to critically evaluate the content and contribute feedback or suggestions for improvement. The approaches shared here may not be suitable for all use cases, and I recommend exploring alternative methods or consulting other resources to make well-informed decisions. As always, use the right tools for the right job!

License

MIT