{"id":18862220,"url":"https://github.com/lucbpz/understanding-react-query","last_synced_at":"2025-07-23T01:34:30.943Z","repository":{"id":84408881,"uuid":"311128290","full_name":"lucbpz/understanding-react-query","owner":"lucbpz","description":"Understanding React Query Full Stack repo with a React FE and a json-server BE. ","archived":false,"fork":false,"pushed_at":"2020-11-21T11:57:37.000Z","size":240,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-30T11:54:46.551Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucbpz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-11-08T18:31:33.000Z","updated_at":"2022-01-09T10:44:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"1ba1a23b-b640-4023-a901-fe80fb241253","html_url":"https://github.com/lucbpz/understanding-react-query","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lucbpz/understanding-react-query","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucbpz%2Funderstanding-react-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucbpz%2Funderstanding-react-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucbpz%2Funderstanding-react-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucbpz%2Funderstanding-react-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucbpz","download_url":"https://codeload.github.com/lucbpz/understanding-react-query/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucbpz%2Funderstanding-react-query/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266602820,"owners_count":23954696,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-08T04:33:41.676Z","updated_at":"2025-07-23T01:34:30.878Z","avatar_url":"https://github.com/lucbpz.png","language":"JavaScript","readme":"# Understanding React Query\n\nThis repo is intended to help you understand the main features of React Query and why it changes the way of thinking we have when having async state mixed with client state in a React application.\n\n- [🎉 How to start the app](#-how-to-start-the-app)\n  - [🕸 Frontend](#-starting-the-frontend)\n  - [🔙 Backend](#-starting-the-backend)\n- [✨ Starting point](#-starting-point)\n- [🚂 Steps](#-steps)\n- [🏛 Licenses](#-licenses)\n\n## How to start the app\n\nThis repo contains the full stack app - a React app and a json-server to store the data.\n\n### Starting the Frontend\n\n```\ncd front\nyarn \u0026\u0026 yarn start\n```\n\n### Starting the Backend\n\n```\ncd back\nyarn \u0026\u0026 yarn start:watch\n```\n\n---\n\nOnce both are started, go to `http://localhost:3000` and see the running app.\n\n## Starting point\n\nThe starting point of this exercise is a React app that renders a list of posts. Posts are stored in the \"JSON DB\" in the backend, and served by `json-server`. The posts are fetched and rendered, and the user can add a new post, edit a post and delete a post.\n\nAll of this is done with a regular fetch, wrapped in an `api.js` file that only exports the methods needed for that CRUD.\n\n## Steps\n\n1. Add React Query to front.\n2. Wrap App with React Query Provider.\n3. Replace GET posts with useQuery.\n4. Replace Create, Edit and Delete with useMutation.\n5. Invalidate GET posts on mutation success.\n6. Optimistic update on Create, Edit and Delete.\n\n## Licenses\n\n**© Copyright 2020 Lucas Bernalte**\n\n**The MIT License**\n\n[Full MIT license text](LICENSE)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucbpz%2Funderstanding-react-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucbpz%2Funderstanding-react-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucbpz%2Funderstanding-react-query/lists"}