├── .gitignore
├── README.md
├── db.json
├── index.html
├── package.json
├── postcss.config.cjs
├── public
└── vite.svg
├── src
├── App.css
├── App.jsx
├── assets
│ └── react.svg
├── component
│ ├── withGlobalStore
│ │ ├── cart.jsx
│ │ ├── cartDrawer.jsx
│ │ ├── info.jsx
│ │ ├── product.jsx
│ │ ├── store.js
│ │ └── withGlobalStore.jsx
│ └── withReactQuery
│ │ ├── cart.jsx
│ │ ├── cartDrawer.jsx
│ │ ├── info.jsx
│ │ ├── product.jsx
│ │ ├── withReactQuery.jsx
│ │ └── withUseEffect.jsx
├── fetchers
│ └── products.js
├── index.css
└── main.jsx
├── tailwind.config.cjs
├── vite.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Why you should use React Query instead of useEffect for API Calls?
2 |
3 | This repo, gives great examples of why you should use react-query library for fetching and storing the state of your server-side data in React instead of gambling with useEffect and redux
4 |
5 | - use react-query for fetching
6 | - it has isLoading, error, isSuccess with a single hook
7 | - It's smart about when to refetch and sharing data between components
8 | - Uses cache cleverly giving you all the control
9 | - Easy to use and makes it easier for your team
10 |
11 | All the details are explained on CoderOne's youtube channel: https://youtu.be/Kjkx2BASAZA
12 |
--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "cart": [
3 | {
4 | "id": 3
5 | },
6 | {
7 | "id": 1
8 | }
9 | ],
10 | "products": [
11 | {
12 | "id": 1,
13 | "title": "iPhone 9",
14 | "description": "An apple mobile which is nothing like apple",
15 | "price": 549,
16 | "discountPercentage": 12.96,
17 | "rating": 4.69,
18 | "stock": 94,
19 | "brand": "Apple",
20 | "category": "smartphones",
21 | "thumbnail": "https://dummyjson.com/image/i/products/1/thumbnail.jpg",
22 | "images": [
23 | "https://dummyjson.com/image/i/products/1/1.jpg",
24 | "https://dummyjson.com/image/i/products/1/2.jpg",
25 | "https://dummyjson.com/image/i/products/1/3.jpg",
26 | "https://dummyjson.com/image/i/products/1/4.jpg",
27 | "https://dummyjson.com/image/i/products/1/thumbnail.jpg"
28 | ]
29 | },
30 | {
31 | "id": 2,
32 | "title": "iPhone X",
33 | "description": "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
34 | "price": 899,
35 | "discountPercentage": 17.94,
36 | "rating": 4.44,
37 | "stock": 34,
38 | "brand": "Apple",
39 | "category": "smartphones",
40 | "thumbnail": "https://dummyjson.com/image/i/products/2/thumbnail.jpg",
41 | "images": [
42 | "https://dummyjson.com/image/i/products/2/1.jpg",
43 | "https://dummyjson.com/image/i/products/2/2.jpg",
44 | "https://dummyjson.com/image/i/products/2/3.jpg",
45 | "https://dummyjson.com/image/i/products/2/thumbnail.jpg"
46 | ]
47 | },
48 | {
49 | "id": 3,
50 | "title": "Samsung Universe 9",
51 | "description": "Samsung's new variant which goes beyond Galaxy to the Universe",
52 | "price": 1249,
53 | "discountPercentage": 15.46,
54 | "rating": 4.09,
55 | "stock": 36,
56 | "brand": "Samsung",
57 | "category": "smartphones",
58 | "thumbnail": "https://dummyjson.com/image/i/products/3/thumbnail.jpg",
59 | "images": ["https://dummyjson.com/image/i/products/3/1.jpg"]
60 | },
61 | {
62 | "id": 4,
63 | "title": "OPPOF19",
64 | "description": "OPPO F19 is officially announced on April 2021.",
65 | "price": 280,
66 | "discountPercentage": 17.91,
67 | "rating": 4.3,
68 | "stock": 123,
69 | "brand": "OPPO",
70 | "category": "smartphones",
71 | "thumbnail": "https://dummyjson.com/image/i/products/4/thumbnail.jpg",
72 | "images": [
73 | "https://dummyjson.com/image/i/products/4/1.jpg",
74 | "https://dummyjson.com/image/i/products/4/2.jpg",
75 | "https://dummyjson.com/image/i/products/4/3.jpg",
76 | "https://dummyjson.com/image/i/products/4/4.jpg",
77 | "https://dummyjson.com/image/i/products/4/thumbnail.jpg"
78 | ]
79 | },
80 | {
81 | "id": 5,
82 | "title": "Huawei P30",
83 | "description": "Huawei’s re-badged P30 Pro New Edition was officially unveiled yesterday in Germany and now the device has made its way to the UK.",
84 | "price": 499,
85 | "discountPercentage": 10.58,
86 | "rating": 4.09,
87 | "stock": 32,
88 | "brand": "Huawei",
89 | "category": "smartphones",
90 | "thumbnail": "https://dummyjson.com/image/i/products/5/thumbnail.jpg",
91 | "images": [
92 | "https://dummyjson.com/image/i/products/5/1.jpg",
93 | "https://dummyjson.com/image/i/products/5/2.jpg",
94 | "https://dummyjson.com/image/i/products/5/3.jpg"
95 | ]
96 | },
97 | {
98 | "id": 6,
99 | "title": "MacBook Pro",
100 | "description": "MacBook Pro 2021 with mini-LED display may launch between September, November",
101 | "price": 1749,
102 | "discountPercentage": 11.02,
103 | "rating": 4.57,
104 | "stock": 83,
105 | "brand": "APPle",
106 | "category": "laptops",
107 | "thumbnail": "https://dummyjson.com/image/i/products/6/thumbnail.png",
108 | "images": [
109 | "https://dummyjson.com/image/i/products/6/1.png",
110 | "https://dummyjson.com/image/i/products/6/2.jpg",
111 | "https://dummyjson.com/image/i/products/6/3.png",
112 | "https://dummyjson.com/image/i/products/6/4.jpg"
113 | ]
114 | },
115 | {
116 | "id": 7,
117 | "title": "Samsung Galaxy Book",
118 | "description": "Samsung Galaxy Book S (2020) Laptop With Intel Lakefield Chip, 8GB of RAM Launched",
119 | "price": 1499,
120 | "discountPercentage": 4.15,
121 | "rating": 4.25,
122 | "stock": 50,
123 | "brand": "Samsung",
124 | "category": "laptops",
125 | "thumbnail": "https://dummyjson.com/image/i/products/7/thumbnail.jpg",
126 | "images": [
127 | "https://dummyjson.com/image/i/products/7/1.jpg",
128 | "https://dummyjson.com/image/i/products/7/2.jpg",
129 | "https://dummyjson.com/image/i/products/7/3.jpg",
130 | "https://dummyjson.com/image/i/products/7/thumbnail.jpg"
131 | ]
132 | },
133 | {
134 | "id": 8,
135 | "title": "Microsoft Surface Laptop 4",
136 | "description": "Style and speed. Stand out on HD video calls backed by Studio Mics. Capture ideas on the vibrant touchscreen.",
137 | "price": 1499,
138 | "discountPercentage": 10.23,
139 | "rating": 4.43,
140 | "stock": 68,
141 | "brand": "Microsoft Surface",
142 | "category": "laptops",
143 | "thumbnail": "https://dummyjson.com/image/i/products/8/thumbnail.jpg",
144 | "images": [
145 | "https://dummyjson.com/image/i/products/8/1.jpg",
146 | "https://dummyjson.com/image/i/products/8/2.jpg",
147 | "https://dummyjson.com/image/i/products/8/3.jpg",
148 | "https://dummyjson.com/image/i/products/8/4.jpg",
149 | "https://dummyjson.com/image/i/products/8/thumbnail.jpg"
150 | ]
151 | },
152 | {
153 | "id": 9,
154 | "title": "Infinix INBOOK",
155 | "description": "Infinix Inbook X1 Ci3 10th 8GB 256GB 14 Win10 Grey – 1 Year Warranty",
156 | "price": 1099,
157 | "discountPercentage": 11.83,
158 | "rating": 4.54,
159 | "stock": 96,
160 | "brand": "Infinix",
161 | "category": "laptops",
162 | "thumbnail": "https://dummyjson.com/image/i/products/9/thumbnail.jpg",
163 | "images": [
164 | "https://dummyjson.com/image/i/products/9/1.jpg",
165 | "https://dummyjson.com/image/i/products/9/2.png",
166 | "https://dummyjson.com/image/i/products/9/3.png",
167 | "https://dummyjson.com/image/i/products/9/4.jpg",
168 | "https://dummyjson.com/image/i/products/9/thumbnail.jpg"
169 | ]
170 | },
171 | {
172 | "id": 10,
173 | "title": "HP Pavilion 15-DK1056WM",
174 | "description": "HP Pavilion 15-DK1056WM Gaming Laptop 10th Gen Core i5, 8GB, 256GB SSD, GTX 1650 4GB, Windows 10",
175 | "price": 1099,
176 | "discountPercentage": 6.18,
177 | "rating": 4.43,
178 | "stock": 89,
179 | "brand": "HP Pavilion",
180 | "category": "laptops",
181 | "thumbnail": "https://dummyjson.com/image/i/products/10/thumbnail.jpeg",
182 | "images": [
183 | "https://dummyjson.com/image/i/products/10/1.jpg",
184 | "https://dummyjson.com/image/i/products/10/2.jpg",
185 | "https://dummyjson.com/image/i/products/10/3.jpg",
186 | "https://dummyjson.com/image/i/products/10/thumbnail.jpeg"
187 | ]
188 | },
189 | {
190 | "id": 11,
191 | "title": "perfume Oil",
192 | "description": "Mega Discount, Impression of Acqua Di Gio by GiorgioArmani concentrated attar perfume Oil",
193 | "price": 13,
194 | "discountPercentage": 8.4,
195 | "rating": 4.26,
196 | "stock": 65,
197 | "brand": "Impression of Acqua Di Gio",
198 | "category": "fragrances",
199 | "thumbnail": "https://dummyjson.com/image/i/products/11/thumbnail.jpg",
200 | "images": [
201 | "https://dummyjson.com/image/i/products/11/1.jpg",
202 | "https://dummyjson.com/image/i/products/11/2.jpg",
203 | "https://dummyjson.com/image/i/products/11/3.jpg",
204 | "https://dummyjson.com/image/i/products/11/thumbnail.jpg"
205 | ]
206 | },
207 | {
208 | "id": 12,
209 | "title": "Brown Perfume",
210 | "description": "Royal_Mirage Sport Brown Perfume for Men & Women - 120ml",
211 | "price": 40,
212 | "discountPercentage": 15.66,
213 | "rating": 4,
214 | "stock": 52,
215 | "brand": "Royal_Mirage",
216 | "category": "fragrances",
217 | "thumbnail": "https://dummyjson.com/image/i/products/12/thumbnail.jpg",
218 | "images": [
219 | "https://dummyjson.com/image/i/products/12/1.jpg",
220 | "https://dummyjson.com/image/i/products/12/2.jpg",
221 | "https://dummyjson.com/image/i/products/12/3.png",
222 | "https://dummyjson.com/image/i/products/12/4.jpg",
223 | "https://dummyjson.com/image/i/products/12/thumbnail.jpg"
224 | ]
225 | },
226 | {
227 | "id": 13,
228 | "title": "Fog Scent Xpressio Perfume",
229 | "description": "Product details of Best Fog Scent Xpressio Perfume 100ml For Men cool long lasting perfumes for Men",
230 | "price": 13,
231 | "discountPercentage": 8.14,
232 | "rating": 4.59,
233 | "stock": 61,
234 | "brand": "Fog Scent Xpressio",
235 | "category": "fragrances",
236 | "thumbnail": "https://dummyjson.com/image/i/products/13/thumbnail.webp",
237 | "images": [
238 | "https://dummyjson.com/image/i/products/13/1.jpg",
239 | "https://dummyjson.com/image/i/products/13/2.png",
240 | "https://dummyjson.com/image/i/products/13/3.jpg",
241 | "https://dummyjson.com/image/i/products/13/4.jpg",
242 | "https://dummyjson.com/image/i/products/13/thumbnail.webp"
243 | ]
244 | },
245 | {
246 | "id": 14,
247 | "title": "Non-Alcoholic Concentrated Perfume Oil",
248 | "description": "Original Al Munakh® by Mahal Al Musk | Our Impression of Climate | 6ml Non-Alcoholic Concentrated Perfume Oil",
249 | "price": 120,
250 | "discountPercentage": 15.6,
251 | "rating": 4.21,
252 | "stock": 114,
253 | "brand": "Al Munakh",
254 | "category": "fragrances",
255 | "thumbnail": "https://dummyjson.com/image/i/products/14/thumbnail.jpg",
256 | "images": [
257 | "https://dummyjson.com/image/i/products/14/1.jpg",
258 | "https://dummyjson.com/image/i/products/14/2.jpg",
259 | "https://dummyjson.com/image/i/products/14/3.jpg",
260 | "https://dummyjson.com/image/i/products/14/thumbnail.jpg"
261 | ]
262 | },
263 | {
264 | "id": 15,
265 | "title": "Eau De Perfume Spray",
266 | "description": "Genuine Al-Rehab spray perfume from UAE/Saudi Arabia/Yemen High Quality",
267 | "price": 30,
268 | "discountPercentage": 10.99,
269 | "rating": 4.7,
270 | "stock": 105,
271 | "brand": "Lord - Al-Rehab",
272 | "category": "fragrances",
273 | "thumbnail": "https://dummyjson.com/image/i/products/15/thumbnail.jpg",
274 | "images": [
275 | "https://dummyjson.com/image/i/products/15/1.jpg",
276 | "https://dummyjson.com/image/i/products/15/2.jpg",
277 | "https://dummyjson.com/image/i/products/15/3.jpg",
278 | "https://dummyjson.com/image/i/products/15/4.jpg",
279 | "https://dummyjson.com/image/i/products/15/thumbnail.jpg"
280 | ]
281 | },
282 | {
283 | "id": 16,
284 | "title": "Hyaluronic Acid Serum",
285 | "description": "L'Oréal Paris introduces Hyaluron Expert Replumping Serum formulated with 1.5% Hyaluronic Acid",
286 | "price": 19,
287 | "discountPercentage": 13.31,
288 | "rating": 4.83,
289 | "stock": 110,
290 | "brand": "L'Oreal Paris",
291 | "category": "skincare",
292 | "thumbnail": "https://dummyjson.com/image/i/products/16/thumbnail.jpg",
293 | "images": [
294 | "https://dummyjson.com/image/i/products/16/1.png",
295 | "https://dummyjson.com/image/i/products/16/2.webp",
296 | "https://dummyjson.com/image/i/products/16/3.jpg",
297 | "https://dummyjson.com/image/i/products/16/4.jpg",
298 | "https://dummyjson.com/image/i/products/16/thumbnail.jpg"
299 | ]
300 | },
301 | {
302 | "id": 17,
303 | "title": "Tree Oil 30ml",
304 | "description": "Tea tree oil contains a number of compounds, including terpinen-4-ol, that have been shown to kill certain bacteria,",
305 | "price": 12,
306 | "discountPercentage": 4.09,
307 | "rating": 4.52,
308 | "stock": 78,
309 | "brand": "Hemani Tea",
310 | "category": "skincare",
311 | "thumbnail": "https://dummyjson.com/image/i/products/17/thumbnail.jpg",
312 | "images": [
313 | "https://dummyjson.com/image/i/products/17/1.jpg",
314 | "https://dummyjson.com/image/i/products/17/2.jpg",
315 | "https://dummyjson.com/image/i/products/17/3.jpg",
316 | "https://dummyjson.com/image/i/products/17/thumbnail.jpg"
317 | ]
318 | },
319 | {
320 | "id": 18,
321 | "title": "Oil Free Moisturizer 100ml",
322 | "description": "Dermive Oil Free Moisturizer with SPF 20 is specifically formulated with ceramides, hyaluronic acid & sunscreen.",
323 | "price": 40,
324 | "discountPercentage": 13.1,
325 | "rating": 4.56,
326 | "stock": 88,
327 | "brand": "Dermive",
328 | "category": "skincare",
329 | "thumbnail": "https://dummyjson.com/image/i/products/18/thumbnail.jpg",
330 | "images": [
331 | "https://dummyjson.com/image/i/products/18/1.jpg",
332 | "https://dummyjson.com/image/i/products/18/2.jpg",
333 | "https://dummyjson.com/image/i/products/18/3.jpg",
334 | "https://dummyjson.com/image/i/products/18/4.jpg",
335 | "https://dummyjson.com/image/i/products/18/thumbnail.jpg"
336 | ]
337 | },
338 | {
339 | "id": 19,
340 | "title": "Skin Beauty Serum.",
341 | "description": "Product name: rorec collagen hyaluronic acid white face serum riceNet weight: 15 m",
342 | "price": 46,
343 | "discountPercentage": 10.68,
344 | "rating": 4.42,
345 | "stock": 54,
346 | "brand": "ROREC White Rice",
347 | "category": "skincare",
348 | "thumbnail": "https://dummyjson.com/image/i/products/19/thumbnail.jpg",
349 | "images": [
350 | "https://dummyjson.com/image/i/products/19/1.jpg",
351 | "https://dummyjson.com/image/i/products/19/2.jpg",
352 | "https://dummyjson.com/image/i/products/19/3.png",
353 | "https://dummyjson.com/image/i/products/19/thumbnail.jpg"
354 | ]
355 | },
356 | {
357 | "id": 20,
358 | "title": "Freckle Treatment Cream- 15gm",
359 | "description": "Fair & Clear is Pakistan's only pure Freckle cream which helpsfade Freckles, Darkspots and pigments. Mercury level is 0%, so there are no side effects.",
360 | "price": 70,
361 | "discountPercentage": 16.99,
362 | "rating": 4.06,
363 | "stock": 140,
364 | "brand": "Fair & Clear",
365 | "category": "skincare",
366 | "thumbnail": "https://dummyjson.com/image/i/products/20/thumbnail.jpg",
367 | "images": [
368 | "https://dummyjson.com/image/i/products/20/1.jpg",
369 | "https://dummyjson.com/image/i/products/20/2.jpg",
370 | "https://dummyjson.com/image/i/products/20/3.jpg",
371 | "https://dummyjson.com/image/i/products/20/4.jpg",
372 | "https://dummyjson.com/image/i/products/20/thumbnail.jpg"
373 | ]
374 | },
375 | {
376 | "id": 21,
377 | "title": "- Daal Masoor 500 grams",
378 | "description": "Fine quality Branded Product Keep in a cool and dry place",
379 | "price": 20,
380 | "discountPercentage": 4.81,
381 | "rating": 4.44,
382 | "stock": 133,
383 | "brand": "Saaf & Khaas",
384 | "category": "groceries",
385 | "thumbnail": "https://dummyjson.com/image/i/products/21/thumbnail.png",
386 | "images": [
387 | "https://dummyjson.com/image/i/products/21/1.png",
388 | "https://dummyjson.com/image/i/products/21/2.jpg",
389 | "https://dummyjson.com/image/i/products/21/3.jpg"
390 | ]
391 | },
392 | {
393 | "id": 22,
394 | "title": "Elbow Macaroni - 400 gm",
395 | "description": "Product details of Bake Parlor Big Elbow Macaroni - 400 gm",
396 | "price": 14,
397 | "discountPercentage": 15.58,
398 | "rating": 4.57,
399 | "stock": 146,
400 | "brand": "Bake Parlor Big",
401 | "category": "groceries",
402 | "thumbnail": "https://dummyjson.com/image/i/products/22/thumbnail.jpg",
403 | "images": [
404 | "https://dummyjson.com/image/i/products/22/1.jpg",
405 | "https://dummyjson.com/image/i/products/22/2.jpg",
406 | "https://dummyjson.com/image/i/products/22/3.jpg"
407 | ]
408 | },
409 | {
410 | "id": 23,
411 | "title": "Orange Essence Food Flavou",
412 | "description": "Specifications of Orange Essence Food Flavour For Cakes and Baking Food Item",
413 | "price": 14,
414 | "discountPercentage": 8.04,
415 | "rating": 4.85,
416 | "stock": 26,
417 | "brand": "Baking Food Items",
418 | "category": "groceries",
419 | "thumbnail": "https://dummyjson.com/image/i/products/23/thumbnail.jpg",
420 | "images": [
421 | "https://dummyjson.com/image/i/products/23/1.jpg",
422 | "https://dummyjson.com/image/i/products/23/2.jpg",
423 | "https://dummyjson.com/image/i/products/23/3.jpg",
424 | "https://dummyjson.com/image/i/products/23/4.jpg",
425 | "https://dummyjson.com/image/i/products/23/thumbnail.jpg"
426 | ]
427 | },
428 | {
429 | "id": 24,
430 | "title": "cereals muesli fruit nuts",
431 | "description": "original fauji cereal muesli 250gm box pack original fauji cereals muesli fruit nuts flakes breakfast cereal break fast faujicereals cerels cerel foji fouji",
432 | "price": 46,
433 | "discountPercentage": 16.8,
434 | "rating": 4.94,
435 | "stock": 113,
436 | "brand": "fauji",
437 | "category": "groceries",
438 | "thumbnail": "https://dummyjson.com/image/i/products/24/thumbnail.jpg",
439 | "images": [
440 | "https://dummyjson.com/image/i/products/24/1.jpg",
441 | "https://dummyjson.com/image/i/products/24/2.jpg",
442 | "https://dummyjson.com/image/i/products/24/3.jpg",
443 | "https://dummyjson.com/image/i/products/24/4.jpg",
444 | "https://dummyjson.com/image/i/products/24/thumbnail.jpg"
445 | ]
446 | },
447 | {
448 | "id": 25,
449 | "title": "Gulab Powder 50 Gram",
450 | "description": "Dry Rose Flower Powder Gulab Powder 50 Gram • Treats Wounds",
451 | "price": 70,
452 | "discountPercentage": 13.58,
453 | "rating": 4.87,
454 | "stock": 47,
455 | "brand": "Dry Rose",
456 | "category": "groceries",
457 | "thumbnail": "https://dummyjson.com/image/i/products/25/thumbnail.jpg",
458 | "images": [
459 | "https://dummyjson.com/image/i/products/25/1.png",
460 | "https://dummyjson.com/image/i/products/25/2.jpg",
461 | "https://dummyjson.com/image/i/products/25/3.png",
462 | "https://dummyjson.com/image/i/products/25/4.jpg",
463 | "https://dummyjson.com/image/i/products/25/thumbnail.jpg"
464 | ]
465 | },
466 | {
467 | "id": 26,
468 | "title": "Plant Hanger For Home",
469 | "description": "Boho Decor Plant Hanger For Home Wall Decoration Macrame Wall Hanging Shelf",
470 | "price": 41,
471 | "discountPercentage": 17.86,
472 | "rating": 4.08,
473 | "stock": 131,
474 | "brand": "Boho Decor",
475 | "category": "home-decoration",
476 | "thumbnail": "https://dummyjson.com/image/i/products/26/thumbnail.jpg",
477 | "images": [
478 | "https://dummyjson.com/image/i/products/26/1.jpg",
479 | "https://dummyjson.com/image/i/products/26/2.jpg",
480 | "https://dummyjson.com/image/i/products/26/3.jpg",
481 | "https://dummyjson.com/image/i/products/26/4.jpg",
482 | "https://dummyjson.com/image/i/products/26/5.jpg",
483 | "https://dummyjson.com/image/i/products/26/thumbnail.jpg"
484 | ]
485 | },
486 | {
487 | "id": 27,
488 | "title": "Flying Wooden Bird",
489 | "description": "Package Include 6 Birds with Adhesive Tape Shape: 3D Shaped Wooden Birds Material: Wooden MDF, Laminated 3.5mm",
490 | "price": 51,
491 | "discountPercentage": 15.58,
492 | "rating": 4.41,
493 | "stock": 17,
494 | "brand": "Flying Wooden",
495 | "category": "home-decoration",
496 | "thumbnail": "https://dummyjson.com/image/i/products/27/thumbnail.webp",
497 | "images": [
498 | "https://dummyjson.com/image/i/products/27/1.jpg",
499 | "https://dummyjson.com/image/i/products/27/2.jpg",
500 | "https://dummyjson.com/image/i/products/27/3.jpg",
501 | "https://dummyjson.com/image/i/products/27/4.jpg",
502 | "https://dummyjson.com/image/i/products/27/thumbnail.webp"
503 | ]
504 | },
505 | {
506 | "id": 28,
507 | "title": "3D Embellishment Art Lamp",
508 | "description": "3D led lamp sticker Wall sticker 3d wall art light on/off button cell operated (included)",
509 | "price": 20,
510 | "discountPercentage": 16.49,
511 | "rating": 4.82,
512 | "stock": 54,
513 | "brand": "LED Lights",
514 | "category": "home-decoration",
515 | "thumbnail": "https://dummyjson.com/image/i/products/28/thumbnail.jpg",
516 | "images": [
517 | "https://dummyjson.com/image/i/products/28/1.jpg",
518 | "https://dummyjson.com/image/i/products/28/2.jpg",
519 | "https://dummyjson.com/image/i/products/28/3.png",
520 | "https://dummyjson.com/image/i/products/28/4.jpg",
521 | "https://dummyjson.com/image/i/products/28/thumbnail.jpg"
522 | ]
523 | },
524 | {
525 | "id": 29,
526 | "title": "Handcraft Chinese style",
527 | "description": "Handcraft Chinese style art luxury palace hotel villa mansion home decor ceramic vase with brass fruit plate",
528 | "price": 60,
529 | "discountPercentage": 15.34,
530 | "rating": 4.44,
531 | "stock": 7,
532 | "brand": "luxury palace",
533 | "category": "home-decoration",
534 | "thumbnail": "https://dummyjson.com/image/i/products/29/thumbnail.webp",
535 | "images": [
536 | "https://dummyjson.com/image/i/products/29/1.jpg",
537 | "https://dummyjson.com/image/i/products/29/2.jpg",
538 | "https://dummyjson.com/image/i/products/29/3.webp",
539 | "https://dummyjson.com/image/i/products/29/4.webp",
540 | "https://dummyjson.com/image/i/products/29/thumbnail.webp"
541 | ]
542 | },
543 | {
544 | "id": 30,
545 | "title": "Key Holder",
546 | "description": "Attractive DesignMetallic materialFour key hooksReliable & DurablePremium Quality",
547 | "price": 30,
548 | "discountPercentage": 2.92,
549 | "rating": 4.92,
550 | "stock": 54,
551 | "brand": "Golden",
552 | "category": "home-decoration",
553 | "thumbnail": "https://dummyjson.com/image/i/products/30/thumbnail.jpg",
554 | "images": [
555 | "https://dummyjson.com/image/i/products/30/1.jpg",
556 | "https://dummyjson.com/image/i/products/30/2.jpg",
557 | "https://dummyjson.com/image/i/products/30/3.jpg",
558 | "https://dummyjson.com/image/i/products/30/thumbnail.jpg"
559 | ]
560 | }
561 | ]
562 | }
563 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-api-query",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@tanstack/react-query": "^4.10.1",
13 | "@tanstack/react-query-devtools": "^4.10.1",
14 | "axios": "^1.1.2",
15 | "react": "^18.2.0",
16 | "react-dom": "^18.2.0",
17 | "styled-components": "^5.3.6"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^18.0.17",
21 | "@types/react-dom": "^18.0.6",
22 | "@vitejs/plugin-react": "^2.1.0",
23 | "autoprefixer": "^10.4.12",
24 | "postcss": "^8.4.17",
25 | "tailwindcss": "^3.1.8",
26 | "vite": "^3.1.0"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | margin: 0 auto;
3 | text-align: center;
4 | }
5 |
6 | .logo {
7 | height: 6em;
8 | padding: 1.5em;
9 | will-change: filter;
10 | }
11 | .logo:hover {
12 | filter: drop-shadow(0 0 2em #646cffaa);
13 | }
14 | .logo.react:hover {
15 | filter: drop-shadow(0 0 2em #61dafbaa);
16 | }
17 |
18 | @keyframes logo-spin {
19 | from {
20 | transform: rotate(0deg);
21 | }
22 | to {
23 | transform: rotate(360deg);
24 | }
25 | }
26 |
27 | @media (prefers-reduced-motion: no-preference) {
28 | a:nth-of-type(2) .logo {
29 | animation: logo-spin infinite 20s linear;
30 | }
31 | }
32 |
33 | .card {
34 | padding: 2em;
35 | }
36 |
37 | .read-the-docs {
38 | color: #888;
39 | }
40 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import reactLogo from "./assets/react.svg";
3 | import "./App.css";
4 | import { WithReactQuery } from "./component/withReactQuery/withReactQuery";
5 | import { Info } from "./component/withReactQuery/info";
6 | import { Cart } from "./component/withReactQuery/cart";
7 |
8 | function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
18 |
28 |
29 |
30 | {isOpen && }
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/component/withGlobalStore/cartDrawer.jsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { useEffect, useMemo } from "react";
3 | import { fetchCart } from "../../fetchers/products";
4 | import { Product } from "./product";
5 |
6 | export function CartDrawer(props) {
7 | const { onClose } = props;
8 |
9 | const dispatch = useDispatch();
10 |
11 | const products = useAppSelector((state) => state.products);
12 | const cart = useAppSelector((state) => state.cart);
13 |
14 | const isRefetchCart = useAppSelector((state) => state.isRefetchCart);
15 |
16 | const fetchCartProducts = async () => {
17 | const cart = await fetchCart();
18 | dispatch(setCart(cart));
19 | };
20 |
21 | useEffect(() => {
22 | fetchCartProducts();
23 | }, []);
24 |
25 | useEffect(() => {
26 | if (isRefetchCart) fetchCartProducts();
27 | }, [isRefetchCart]);
28 |
29 | const cartProducts = useMemo(
30 | () =>
31 | products &&
32 | products.filter((product) => cart?.some((c) => c.id === product.id))
33 | );
34 |
35 | if (cartQuery.isLoading) return Loading...
;
36 |
37 | return (
38 |
44 |
48 |
61 | Your Cart
62 |
63 |
85 |
86 |
87 | {/*
Expensive calculation - {n}
*/}
88 | {cartProducts &&
89 | cartProducts.map((product) => (
90 |
91 | ))}
92 |
93 |
94 |
Loading...
;
14 |
15 | return (
16 |
17 |
Products Info:
18 |
19 | Toltal Products: {TotalNumberOfProducts}
20 |
21 |
22 | Number of Products over 300$: {numberOfProductsOver300}
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/component/withGlobalStore/product.jsx:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import axios from "axios";
3 | import styled from "styled-components";
4 |
5 | export function Product(props) {
6 | const { product } = props;
7 | const {
8 | id,
9 | title,
10 | description,
11 | price,
12 | rating,
13 | stock,
14 | brand,
15 | category,
16 | thumbnail,
17 | images,
18 | } = product;
19 |
20 | const triggerRefreshCart = useAppState((state) => state.triggerRefreshCart);
21 |
22 | //This what the mutation would look like!
23 | const onAddToCart = (event) => {
24 | const newProduct = { id };
25 | console.log("Run: ", newProduct);
26 | const response = axios.post(`http://localhost:3000/cart`, newProduct);
27 |
28 | //TRIGGER FETCHING NEW PRODUCTS FROM CART!
29 | //This will go and instruct the component to refetch and update global store!
30 | triggerRefreshCart();
31 | };
32 |
33 | if (cartMutation.isLoading) return Loading...
;
34 |
35 | return (
36 |
37 |
38 | 
39 |
40 |
41 |
42 |
43 | {title}
44 |
45 |
46 |
47 |
57 |
67 |
77 |
87 |
97 |
98 | 5.0
99 |
100 |
101 |
113 |
114 |
24 | {products.map((product) => (
25 |
26 | ))}
27 |
18 |
28 |
29 |
30 | {isOpen && }
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/component/withReactQuery/cartDrawer.jsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { useMemo } from "react";
3 | import { fetchCart, fetchProducts } from "../../fetchers/products";
4 | import { Product } from "./product";
5 |
6 | export function CartDrawer(props) {
7 | const { onClose } = props;
8 |
9 | const cartQuery = useQuery(["cart"], fetchCart, { staleTime: 60000 });
10 |
11 | const productsQuery = useQuery(["products"], fetchProducts, {
12 | staleTime: 3000,
13 | });
14 |
15 | const cart = cartQuery.data;
16 | const products = productsQuery.data;
17 |
18 | const cartProducts = useMemo(
19 | () =>
20 | products &&
21 | products.filter((product) => cart?.some((c) => c.id === product.id))
22 | );
23 |
24 | if (cartQuery.isLoading) return Loading...
;
25 |
26 | return (
27 |
33 |
37 |
50 | Your Cart
51 |
52 |
74 |
75 |
76 | {/*
Expensive calculation - {n}
*/}
77 | {cartProducts &&
78 | cartProducts.map((product) => (
79 |
80 | ))}
81 |
82 |
83 |
Loading...
;
20 |
21 | return (
22 |
23 |
Products Info:
24 |
25 | Toltal Products: {TotalNumberOfProducts}
26 |
27 |
28 | Number of Products over 300$: {numberOfProductsOver300}
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/component/withReactQuery/product.jsx:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import axios from "axios";
3 | import styled from "styled-components";
4 |
5 | export function Product(props) {
6 | const { product } = props;
7 | const {
8 | id,
9 | title,
10 | description,
11 | price,
12 | rating,
13 | stock,
14 | brand,
15 | category,
16 | thumbnail,
17 | images,
18 | } = product;
19 |
20 | const queryClient = useQueryClient();
21 |
22 | //MUTATION (Add Product to Cart through API-POST)
23 | const cartMutation = useMutation(
24 | (newProduct) => {
25 | console.log("Run: ", newProduct);
26 | return axios.post(`http://localhost:3000/cart`, newProduct);
27 | },
28 | {
29 | onSuccess: () => {
30 | queryClient.invalidateQueries(["products"]);
31 | queryClient.refetchQueries("products", { force: true });
32 | },
33 | }
34 | );
35 |
36 | const onAddToCart = (event) => {
37 | event.preventDefault();
38 | cartMutation.mutate({ id });
39 | };
40 |
41 | if (cartMutation.isLoading) return Loading...
;
42 |
43 | return (
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | {title}
52 |
53 |
54 |
55 |
65 |
75 |
85 |
95 |
105 |
106 | 5.0
107 |
108 |
109 |
121 |
122 |
Loading...
;
19 | }
20 |
21 | if (isError) {
22 | console.log("Error: ", error);
23 | return Error...
;
24 | }
25 |
26 | return (
27 |
28 | {data &&
29 | data.map((product) =>
)}
30 |
Loading...
;
33 |
34 | return (
35 |
36 | {products.map((product) => (
37 |
38 | ))}
39 |