Skip to content

Commit 556ade5

Browse files
ConsoleTVsConsoleTVs
committed
fix(react): preserve hooks and component names and fixes to broadcast channel
1 parent 0446791 commit 556ade5

5 files changed

Lines changed: 145 additions & 143 deletions

File tree

‎src/react/components/QueryPrefetch.test.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useQuery } from 'query/react:hooks/useQuery'
44
import { act, Suspense } from 'react'
55
import { createRoot } from 'react-dom/client'
66
import { createQuery } from 'query:index'
7+
import { QueryPrefetch } from './QueryPrefetch'
78

89
describe.concurrent('QueryPrefetch', function () {
910
it('can prefetch keys', async ({ expect }) => {
@@ -31,9 +32,11 @@ describe.concurrent('QueryPrefetch', function () {
3132
await act(async function () {
3233
createRoot(container).render(
3334
<QueryProvider query={query}>
34-
<Suspense fallback={<div>Loading...</div>}>
35-
<Component />
36-
</Suspense>
35+
<QueryPrefetch keys={['/user']}>
36+
<Suspense fallback={<div>Loading...</div>}>
37+
<Component />
38+
</Suspense>
39+
</QueryPrefetch>
3740
</QueryProvider>
3841
)
3942
})

‎src/react/components/QueryProvider.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,21 @@ export function QueryProvider({
1919
[query]
2020
)
2121

22-
function broadcastCleanup() {
23-
if (localQuery.broadcast()) {
22+
useEffect(
23+
function () {
24+
const broadcast = new BroadcastChannel('query')
25+
26+
localQuery.configure({ broadcast })
27+
2428
const unsubscribe = localQuery.subscribeBroadcast()
2529

2630
return function () {
2731
unsubscribe()
32+
broadcast.close()
2833
}
29-
}
30-
31-
const channel = new BroadcastChannel('query')
32-
33-
localQuery.configure({ broadcast: channel })
34-
const unsubscribe = localQuery.subscribeBroadcast()
35-
36-
return function () {
37-
unsubscribe()
38-
channel.close()
39-
}
40-
}
41-
42-
useEffect(broadcastCleanup, [localQuery])
34+
},
35+
[localQuery]
36+
)
4337

4438
const value = useMemo(
4539
function (): ContextValue {

‎src/react/hooks/useQueryBasic.ts‎

Lines changed: 73 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -88,93 +88,94 @@ export function useQueryBasic<T = unknown>(
8888

8989
const [data, setData] = useState<T>(use(promise))
9090

91-
function subscribeHandler() {
92-
function onResolved(event: CustomEventInit<T>) {
93-
startTransition(function () {
94-
setData(event.detail as T)
95-
})
96-
}
97-
98-
function onMutating(event: CustomEventInit<Promise<T>>) {
99-
startTransition(async function () {
100-
const value = await (event.detail as Promise<T>)
101-
91+
useEffect(
92+
function () {
93+
function onResolved(event: CustomEventInit<T>) {
10294
startTransition(function () {
103-
setData(value)
95+
setData(event.detail as T)
10496
})
105-
})
106-
}
97+
}
10798

108-
function onMutated(event: CustomEventInit<T>) {
109-
startTransition(function () {
110-
setData(event.detail as T)
111-
})
112-
}
99+
function onMutating(event: CustomEventInit<Promise<T>>) {
100+
startTransition(async function () {
101+
const value = await (event.detail as Promise<T>)
113102

114-
function onHydrated(event: CustomEventInit<T>) {
115-
startTransition(function () {
116-
setData(event.detail as T)
117-
})
118-
}
103+
startTransition(function () {
104+
setData(value)
105+
})
106+
})
107+
}
119108

120-
function onRefetching(event: CustomEventInit<Promise<T>>) {
121-
startTransition(async function () {
122-
const value = await (event.detail as Promise<T>)
109+
function onMutated(event: CustomEventInit<T>) {
110+
startTransition(function () {
111+
setData(event.detail as T)
112+
})
113+
}
123114

115+
function onHydrated(event: CustomEventInit<T>) {
124116
startTransition(function () {
125-
setData(value)
117+
setData(event.detail as T)
126118
})
127-
})
128-
}
119+
}
129120

130-
function onForgotten() {
131-
if (clearOnForget) {
121+
function onRefetching(event: CustomEventInit<Promise<T>>) {
132122
startTransition(async function () {
133-
const data = await query<T>(key, {
134-
expiration: oExpiration,
135-
fetcher: oFetcher,
136-
stale: oStale,
137-
removeOnError: oRemoveOnError,
138-
fresh: oFresh,
139-
})
123+
const value = await (event.detail as Promise<T>)
140124

141125
startTransition(function () {
142-
setData(data)
126+
setData(value)
143127
})
144128
})
145129
}
146-
}
147-
148-
const unsubscribeResolved = subscribe(key, 'resolved', onResolved)
149-
const unsubscribeMutating = subscribe(key, 'mutating', onMutating)
150-
const unsubscribeMutated = subscribe(key, 'mutated', onMutated)
151-
const unsubscribeHydrated = subscribe(key, 'hydrated', onHydrated)
152-
const unsubscribeRefetching = subscribe(key, 'refetching', onRefetching)
153-
const unsubscribeForgotten = subscribe(key, 'forgotten', onForgotten)
154-
155-
return function () {
156-
unsubscribeResolved()
157-
unsubscribeMutating()
158-
unsubscribeMutated()
159-
unsubscribeHydrated()
160-
unsubscribeRefetching()
161-
unsubscribeForgotten()
162-
}
163-
}
164-
165-
useEffect(subscribeHandler, [
166-
query,
167-
expiration,
168-
subscribe,
169-
key,
170-
clearOnForget,
171-
oExpiration,
172-
oFetcher,
173-
oStale,
174-
oRemoveOnError,
175-
oFresh,
176-
startTransition,
177-
])
130+
131+
function onForgotten() {
132+
if (clearOnForget) {
133+
startTransition(async function () {
134+
const data = await query<T>(key, {
135+
expiration: oExpiration,
136+
fetcher: oFetcher,
137+
stale: oStale,
138+
removeOnError: oRemoveOnError,
139+
fresh: oFresh,
140+
})
141+
142+
startTransition(function () {
143+
setData(data)
144+
})
145+
})
146+
}
147+
}
148+
149+
const unsubscribeResolved = subscribe(key, 'resolved', onResolved)
150+
const unsubscribeMutating = subscribe(key, 'mutating', onMutating)
151+
const unsubscribeMutated = subscribe(key, 'mutated', onMutated)
152+
const unsubscribeHydrated = subscribe(key, 'hydrated', onHydrated)
153+
const unsubscribeRefetching = subscribe(key, 'refetching', onRefetching)
154+
const unsubscribeForgotten = subscribe(key, 'forgotten', onForgotten)
155+
156+
return function () {
157+
unsubscribeResolved()
158+
unsubscribeMutating()
159+
unsubscribeMutated()
160+
unsubscribeHydrated()
161+
unsubscribeRefetching()
162+
unsubscribeForgotten()
163+
}
164+
},
165+
[
166+
query,
167+
expiration,
168+
subscribe,
169+
key,
170+
clearOnForget,
171+
oExpiration,
172+
oFetcher,
173+
oStale,
174+
oRemoveOnError,
175+
oFresh,
176+
startTransition,
177+
]
178+
)
178179

179180
return useMemo(
180181
function (): BasicResource<T> {

‎src/react/hooks/useQueryStatus.ts‎

Lines changed: 53 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -32,58 +32,59 @@ export function useQueryStatus(key: string, options?: QueryInstance): Status {
3232
[expiresAt]
3333
)
3434

35-
function subscribeHandler() {
36-
function onMutating() {
37-
setIsMutating(true)
38-
}
39-
40-
function onMutated() {
41-
setIsMutating(false)
42-
setExpiresAt(expiration(key) ?? new Date())
43-
}
44-
45-
function onHydrated() {
46-
setExpiresAt(expiration(key) ?? new Date())
47-
}
48-
49-
function onResolved() {
50-
setExpiresAt(expiration(key) ?? new Date())
51-
setIsRefetching(false)
52-
}
53-
54-
function onForgotten() {
55-
setExpiresAt(expiration(key) ?? new Date())
56-
}
57-
58-
function onRefetching() {
59-
setIsRefetching(true)
60-
}
61-
62-
function onError() {
63-
setIsRefetching(false)
64-
setIsMutating(false)
65-
}
66-
67-
const unsubscribeMutating = subscribe(key, 'mutating', onMutating)
68-
const unsubscribeMutated = subscribe(key, 'mutated', onMutated)
69-
const unsubscribeHydrated = subscribe(key, 'hydrated', onHydrated)
70-
const unsubscribeResolved = subscribe(key, 'resolved', onResolved)
71-
const unsubscribeForgotten = subscribe(key, 'forgotten', onForgotten)
72-
const unsubscribeRefetching = subscribe(key, 'refetching', onRefetching)
73-
const unsubscribeError = subscribe(key, 'error', onError)
74-
75-
return function () {
76-
unsubscribeMutating()
77-
unsubscribeMutated()
78-
unsubscribeHydrated()
79-
unsubscribeResolved()
80-
unsubscribeForgotten()
81-
unsubscribeRefetching()
82-
unsubscribeError()
83-
}
84-
}
85-
86-
useEffect(subscribeHandler, [key, subscribe, expiration, setExpiresAt])
35+
useEffect(
36+
function () {
37+
function onMutating() {
38+
setIsMutating(true)
39+
}
40+
41+
function onMutated() {
42+
setIsMutating(false)
43+
setExpiresAt(expiration(key) ?? new Date())
44+
}
45+
46+
function onHydrated() {
47+
setExpiresAt(expiration(key) ?? new Date())
48+
}
49+
50+
function onResolved() {
51+
setExpiresAt(expiration(key) ?? new Date())
52+
setIsRefetching(false)
53+
}
54+
55+
function onForgotten() {
56+
setExpiresAt(expiration(key) ?? new Date())
57+
}
58+
59+
function onRefetching() {
60+
setIsRefetching(true)
61+
}
62+
63+
function onError() {
64+
setIsRefetching(false)
65+
setIsMutating(false)
66+
}
67+
68+
const unsubscribeMutating = subscribe(key, 'mutating', onMutating)
69+
const unsubscribeMutated = subscribe(key, 'mutated', onMutated)
70+
const unsubscribeHydrated = subscribe(key, 'hydrated', onHydrated)
71+
const unsubscribeResolved = subscribe(key, 'resolved', onResolved)
72+
const unsubscribeForgotten = subscribe(key, 'forgotten', onForgotten)
73+
const unsubscribeRefetching = subscribe(key, 'refetching', onRefetching)
74+
const unsubscribeError = subscribe(key, 'error', onError)
75+
76+
return function () {
77+
unsubscribeMutating()
78+
unsubscribeMutated()
79+
unsubscribeHydrated()
80+
unsubscribeResolved()
81+
unsubscribeForgotten()
82+
unsubscribeRefetching()
83+
unsubscribeError()
84+
}
85+
},
86+
[key, subscribe, expiration, setExpiresAt]
87+
)
8788

8889
return useMemo(
8990
function () {

‎vite.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export default defineConfig({
2121
// },
2222
],
2323
},
24+
esbuild: {
25+
keepNames: true,
26+
},
2427
build: {
2528
sourcemap: true,
2629
lib: {

0 commit comments

Comments
 (0)