NOTE: There's a README file in Vietnamese. https://github.com/nguyenhieptech/react-query-example/blob/main/README-vi.md
This project is a demonstration of how to use React Query library to perform the following tasks:
- CRUD Operations (using useQuery, useMutation).
- Pagination (using useQuery)
- Load-more like feature (using useInfiniteQuery)
This project is setup with:
- Vite: "Next Generation Frontend Tooling". It's faster than create-react-app. Consider using Vite for all your personal projects. It's worth it.
- WindiCSS: "An on-demand alternative to Tailwind, which provides faster load times, full compatibility with Tailwind v2.0, and a bunch of additional cool features."
- React Hook Form: Performant, flexible and extensible forms with easy-to-use validation.
- React Modal: Accessible modal dialog component for React.
- Axios: Promise based HTTP client for the browser and Node.js.
- JSON Server: Full fake REST API server with zero coding in less than 30 seconds.
- Clone the project
git clone https://github.com/nguyenhieptech/react-query-ts- Go to the project directory:
cd react-query-ts- Install dependencies
yarn install- Setup database file
cp api/sample.db.json api/db.json- Start the
json-server
yarn run json-server- Launch another terminal and start the Vite server
yarn run devHead over to your browser and open the URL http://localhost:3000 to access the application.
- Why React Query is the way to go?
https://www.youtube.com/watch?v=aLQbVd-2tIo
https://www.youtube.com/watch?v=seU46c6Jz7E
- It uses custom hooks for better structure, so that if you want to change implementation details, it doesn't affect code inside components. These two articles below are really IMPORTANT, please read them carefully.
https://kyleshevlin.com/use-encapsulation
https://log.seruco.io/hide-usequery/
- It includes Optimistic Updates. What is Optimistic Updates?
https://react-query.tanstack.com/guides/optimistic-updates
https://stackoverflow.com/questions/33009657/what-is-optimistic-updates-in-front-end-development
https://resthooks.io/docs/guides/optimistic-updates
- How to setup Vite projects with WindiCSS: