{"id":27500897,"url":"https://github.com/junwen-k/react-data-fetching-mutation","last_synced_at":"2026-04-11T01:43:16.805Z","repository":{"id":262794580,"uuid":"885417595","full_name":"junwen-k/react-data-fetching-mutation","owner":"junwen-k","description":"Mastering Data Fetching and Mutations in React: A Practical Guide","archived":false,"fork":false,"pushed_at":"2024-11-19T08:45:55.000Z","size":22912,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T10:56:00.410Z","etag":null,"topics":["data-fetching","mutation","nextjs","react","react-query"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junwen-k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-08T14:46:48.000Z","updated_at":"2024-11-19T08:45:59.000Z","dependencies_parsed_at":"2024-11-14T10:44:51.908Z","dependency_job_id":null,"html_url":"https://github.com/junwen-k/react-data-fetching-mutation","commit_stats":null,"previous_names":["junwen-k/react-data-fetching-mutation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junwen-k%2Freact-data-fetching-mutation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junwen-k%2Freact-data-fetching-mutation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junwen-k%2Freact-data-fetching-mutation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junwen-k%2Freact-data-fetching-mutation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junwen-k","download_url":"https://codeload.github.com/junwen-k/react-data-fetching-mutation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249342482,"owners_count":21254303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-fetching","mutation","nextjs","react","react-query"],"created_at":"2025-04-17T12:55:41.317Z","updated_at":"2026-04-11T01:43:09.624Z","avatar_url":"https://github.com/junwen-k.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mastering Data Fetching and Mutations in React: A Practical Guide\n\n[![License](https://img.shields.io/github/license/junwen-k/react-data-fetching-mutation)](https://github.com/junwen-k/react-data-fetching-mutation/blob/main/LICENSE) ![GitHub Repo stars](https://img.shields.io/github/stars/junwen-k/react-data-fetching-mutation)\n\nIf you find this project useful, please consider starring the repository to help others discover it!\n\n## Prerequisites\n\n1. [Node.js](https://nodejs.org/en): Ensure Node.js v22+ is installed.\n\n1. [Corepack](https://nodejs.org/api/corepack.html): Enable Corepack to manage package managers like pnpm.\n\n   ```zsh\n   corepack enable\n   ```\n\n## Getting Started\n\n1. Install dependencies:\n\n   ```zsh\n   pnpm install\n   ```\n\n1. Start development servers:\n\n   ```zsh\n   pnpm dev\n   ```\n\n1. Navigate to different topics by ports:\n\n   Each example runs on a different port (4000 - 4009). The JSON server is available on port 3000, providing mock data for the examples.\n\n   | Port                           | Topic                    | Description                                        |\n   | ------------------------------ | ------------------------ | -------------------------------------------------- |\n   | [3000](http://localhost:3000/) | Json Server              | Mock json server                                   |\n   | [4000](http://localhost:4000/) | Basic Query CSR          | Basic CSR query setup                              |\n   | [4001](http://localhost:4001/) | React Query CSR          | React Query CSR query setup                        |\n   | [4002](http://localhost:4002/) | Basic Mutation CSR       | Basic CSR mutation setup                           |\n   | [4003](http://localhost:4003/) | React Query Mutation CSR | React Query CSR mutation setup                     |\n   | [4004](http://localhost:4004/) | Basic CSR                | Basic CSR setup                                    |\n   | [4005](http://localhost:4005/) | React Query CSR          | React Query CSR setup                              |\n   | [4006](http://localhost:4006/) | Basic SSR                | Basic SSR setup                                    |\n   | [4007](http://localhost:4007/) | React Query SSR          | React Query SSR setup                              |\n   | [4008](http://localhost:4008/) | Optimistic Update        | React Query optimistic updates without cache setup |\n   | [4009](http://localhost:4009/) | Infinite Scrolling       | React Query infinite scrolling setup               |\n\n1. API Server:\n\n   A mock JSON server is available on port 3000, serving data for all examples.\n\n   ```zsh\n   pnpm --filter=server dev\n   ```\n\n## Running in Production\n\nTo deploy in production mode, follow these steps:\n\n1. Build apps:\n\n   ```zsh\n   pnpm build\n   ```\n\n1. Start production servers:\n\n   ```zsh\n   pnpm start\n   ```\n\n## Directory Structure\n\nEach subfolder under `apps/` represents a specific topic and contains all relevant code and assets:\n\n```zsh\napps/\n├── 1-query-basic-csr/\n├── 2-query-react-query-csr/\n├── 3-mutation-basic-csr/\n├── 4-mutation-react-query-csr/\n├── 5-basic-csr/\n├── 6-react-query-csr/\n├── 7-basic-ssr/\n├── 8-react-query-ssr/\n├── 9-optimistic-update/\n└── 10-infinite-scrolling/\n```\n\n## Disclaimer\n\nThe 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!\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunwen-k%2Freact-data-fetching-mutation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunwen-k%2Freact-data-fetching-mutation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunwen-k%2Freact-data-fetching-mutation/lists"}