Skip to content

Commit c0c1cc6

Browse files
committed
update readme
1 parent 9738d8d commit c0c1cc6

File tree

1 file changed

+16
-7
lines changed

1 file changed

+16
-7
lines changed

README.md

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,19 @@ Let's say the data doesn't change that often. We can set the stale time to 30 se
3939

4040
0 seconds is possibly the safest value you can set to stale time, which is also the default value.
4141

42-
3. react-query refetchOnMount
42+
**3. react-query refetchOnMount**
4343

4444
If set to true, the query will refetch on mount if the data is stale. If set to false, will disable additional instances of a query to trigger background refetches. If set to 'always', the query will always refetch on mount. If set to a function, the function will be executed with the latest data and query to compute the value Defaults to true.
4545

4646
Default value is set to true.
4747

48-
4. react-query refetchOnWindowFocus
48+
**4. react-query refetchOnWindowFocus**
4949

5050
If set to true, the query will refetch on window focus if the data is stale. If set to false, the query will not refetch on window focus. If set to 'always', the query will always refetch on window focus. If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to true.
5151

5252
Default value is set to true.
5353

54-
5. react-query refetchInterval - Polling
54+
**5. react-query refetchInterval - Polling**
5555

5656
Fetching data at regular intervals. For example: If you have component that shows real time price of different stocks, you might want to fetch the data every second so is in sync with UI.
5757

@@ -61,24 +61,33 @@ Default value is set to false.
6161

6262
Polling is paused when the window lose focus. To fix that issue we can set `refetchIntervalInBackground` property to true.
6363

64-
6. Homework (Solution on branch: feature/09-homework)
64+
**6. Homework (Solution on branch: feature/09-homework)**
6565

6666
Combine polling with callbacks. Use the `refetchInterval` option to pull the api data every 3 seconds. Behind the scenes add a fourth superhero of your choice to the superheroes array in `db.json`.
6767

68-
a.) Within the onSuccess callback check if the number of heroes is 4 and ifit is the case I want you to stop the polling.
69-
b.) Within the onError callback I want you to stop the polling.
68+
a.) Within the onSuccess callback check if the number of heroes is 4 and ifit is the case I want you to stop the polling.
69+
b.) Within the onError callback I want you to stop the polling.
7070

7171
Hint:
7272
Mantain state variable whose initial value is 3000. State variable will be assigned to `refetchInterval` configuration. In callbacks check for the response / errors and set the state variable to false.
7373

74-
7. react-query select - Data Transformation
74+
**7. react-query select - Data Transformation**
7575

7676
For data tranformation react-query provides us with `select` flag.
7777

7878
`select` is function that receives onSuccess response and transform out data in the way we want it.
7979

8080
In our example we transformed data to be an array of just heroes names instead of whole response.
8181

82+
**8. QueryById - 2 solutions**
83+
84+
We can query by id in two ways (look commits under branch name: `feature/12-queryById`).
85+
86+
a.) Solution 1 or first commit: **QueryById with manuali passed ID**
87+
- We can manually pass id into fetch function: file `useSuperHeroData`
88+
b.) Solution 2 or second commit: **QueryById with react-query automatic passed id**
89+
- React query automatically pass id into fetch function: file `useSuperHeroData`
90+
8291
## Available Scripts
8392

8493
In the project directory, you can run:

0 commit comments

Comments
 (0)