https://github.com/lucbpz/understanding-react-query

Understanding React Query Full Stack repo with a React FE and a json-server BE.
https://github.com/lucbpz/understanding-react-query

Last synced: 7 days ago
JSON representation

Understanding React Query Full Stack repo with a React FE and a json-server BE.

• Host: GitHub
• URL: https://github.com/lucbpz/understanding-react-query
• Owner: lucbpz
• Created: 2020-11-08T18:31:33.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-11-21T11:57:37.000Z (about 4 years ago)
• Last Synced: 2024-11-08T04:39:24.888Z (about 2 months ago)
• Language: JavaScript
• Size: 234 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Understanding React Query

This 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.

- [🎉 How to start the app](#-how-to-start-the-app)

  - [🕸 Frontend](#-starting-the-frontend)

  - [🔙 Backend](#-starting-the-backend)

- [✨ Starting point](#-starting-point)

- [🚂 Steps](#-steps)

- [🏛 Licenses](#-licenses)

## How to start the app

This repo contains the full stack app - a React app and a json-server to store the data.

### Starting the Frontend

```

cd front

yarn && yarn start

```

### Starting the Backend

```

cd back

yarn && yarn start:watch

```

---

Once both are started, go to `http://localhost:3000` and see the running app.

## Starting point

The 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.

All of this is done with a regular fetch, wrapped in an `api.js` file that only exports the methods needed for that CRUD.

## Steps

1. Add React Query to front.

2. Wrap App with React Query Provider.

3. Replace GET posts with useQuery.

4. Replace Create, Edit and Delete with useMutation.

5. Invalidate GET posts on mutation success.

6. Optimistic update on Create, Edit and Delete.

## Licenses

**© Copyright 2020 Lucas Bernalte**

**The MIT License**

[Full MIT license text](LICENSE)