1
00:00:00,000 --> 00:00:04,320
How should Zustand and TanStack Query work together?

2
00:00:04,320 --> 00:00:07,530
My selected product has two prices,

3
00:00:07,530 --> 00:00:10,160
which feels ambitious for one product.

4
00:00:10,340 --> 00:00:13,540
Keep the selected identifier in Zustand,

5
00:00:13,540 --> 00:00:15,300
and the fetched product in Query.

6
00:00:15,300 --> 00:00:18,540
Store the pointer, not a second server snapshot.

7
00:00:18,720 --> 00:00:20,850
Read that identifier with a selector,

8
00:00:20,850 --> 00:00:22,300
then include it in the query key.

9
00:00:22,300 --> 00:00:23,670
Changing one to two makes this

10
00:00:23,670 --> 00:00:26,120
component observe product two's cache entry.

11
00:00:26,300 --> 00:00:29,890
After saving a price, invalidate the matching product query.

12
00:00:29,890 --> 00:00:31,600
Active readers can refetch.

13
00:00:31,600 --> 00:00:32,970
You do not also need to

14
00:00:32,970 --> 00:00:35,140
patch a product copy in Zustand.

15
00:00:35,320 --> 00:00:37,130
If only one component needs the

16
00:00:37,130 --> 00:00:39,375
selection, useState may be enough.

17
00:00:39,375 --> 00:00:41,500
Zustand earns its place when that

18
00:00:41,500 --> 00:00:43,480
client selection really needs sharing.

19
00:00:43,660 --> 00:00:46,870
Two prices for one product.

20
00:00:46,870 --> 00:00:50,100
We accidentally invented enterprise billing.