If you find this project useful, please consider starring the repository to help others discover it!
-
Node.js: Ensure Node.js v22+ is installed.
-
Corepack: Enable Corepack to manage package managers like pnpm.
corepack enable
-
Install dependencies:
pnpm install
-
Start development servers:
pnpm dev
-
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 -
API Server:
A mock JSON server is available on port 3000, serving data for all examples.
pnpm --filter=server dev
To deploy in production mode, follow these steps:
-
Build apps:
pnpm build
-
Start production servers:
pnpm start
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/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!