https://github.com/tannerlinsley/react-query-blog-demo
An example repo I used to teach a React Query workshop
https://github.com/tannerlinsley/react-query-blog-demo
react-query workshop
Last synced: 7 months ago
JSON representation
An example repo I used to teach a React Query workshop
- Host: GitHub
- URL: https://github.com/tannerlinsley/react-query-blog-demo
- Owner: tannerlinsley
- Created: 2020-10-11T05:25:41.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-20T10:18:08.000Z (almost 5 years ago)
- Last Synced: 2025-04-15T18:27:48.020Z (about 1 year ago)
- Topics: react-query, workshop
- Language: JavaScript
- Homepage: react-summit-2020-react-query.vercel.app
- Size: 128 KB
- Stars: 99
- Watchers: 3
- Forks: 58
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## What is this?
It's an example repo that show show to go from a simple hook-based application to React Query, avoiding all of the "global state" madness that normally happens!
- The `main` branch contains the initial code we started with
- The `with-react-query` branch contains the code we ended with after adding `react-query`
- The #2 PR currently open in the repo shows the changes between the two
## Challenges
- Convert the custom hooks used to fetch data to use `useQuery`
- Implement per-screen background fetching indicators
- Convert the custom hooks used to create/update/delete to use `useMutation`
- Configure mutations to automatically invalidate related queries
- Implement optimistic updates for mutations
- Prefetch individual posts on hover using `queryCache.prefetchQuery` OR
- Use `initialData` to show placeholder content for individual posts that pull from the parent `posts` query
- Remove per-screen background fetching indicators and instead build a global refetching indicator
- Dehydrate/hydrate the cache to and from localStorage using the `react-query/hydration` APIs
## How do I develop on this?
- Run `yarn` and then `yarn dev` locally.
- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
- **NOTE:** The "database" used in this app is simply a JSON file and thus will not work as a deployed application. That said, you are more than welcome to hook it up to a real API if you want!
## Why Next.js?
[Read This 😁](https://gist.github.com/tannerlinsley/65ac1f0175d79d19762cf06650707830)