Skip to content

Commit d2d18da

Browse files
AlemTuzlakAlemTuzlak
committed
chore: close panel in all cases
1 parent 313bad9 commit d2d18da

File tree

3 files changed

+164
-28
lines changed

3 files changed

+164
-28
lines changed

‎examples/react/basic/src/index.tsx‎

Lines changed: 140 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,153 @@
11
import { createRoot } from 'react-dom/client'
2+
import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query'
3+
import { useState } from 'react'
24
import Devtools from './setup'
3-
import { queryPlugin } from './plugin'
45

5-
setTimeout(() => {
6-
queryPlugin.emit('test', {
7-
title: 'Test Event',
8-
description:
9-
'This is a test event from the TanStack Query Devtools plugin.',
10-
})
11-
}, 1000)
126

13-
queryPlugin.on('test', (event) => {
14-
console.log('Received test event:', event)
7+
const queryClient = new QueryClient({
8+
defaultOptions: {
9+
queries: {
10+
gcTime: 1000 * 60 * 60 * 24, // 24 hours
11+
},
12+
},
1513
})
1614

15+
type Post = {
16+
id: number
17+
title: string
18+
body: string
19+
}
20+
21+
function Posts({
22+
setPostId,
23+
}: {
24+
setPostId: React.Dispatch<React.SetStateAction<number>>
25+
}) {
26+
const queryClient = useQueryClient()
27+
const { status, data, error, isFetching } = usePosts()
28+
29+
return (
30+
<div>
31+
<h1>Posts</h1>
32+
<div>
33+
{status === 'pending' ? (
34+
'Loading...'
35+
) : status === 'error' ? (
36+
<span>Error: {error.message}</span>
37+
) : (
38+
<>
39+
<div>
40+
{data.map((post) => (
41+
<p key={post.id}>
42+
<a
43+
onClick={() => setPostId(post.id)}
44+
href="#"
45+
style={
46+
// We can access the query data here to show bold links for
47+
// ones that are cached
48+
queryClient.getQueryData(['post', post.id])
49+
? {
50+
fontWeight: 'bold',
51+
color: 'green',
52+
}
53+
: {}
54+
}
55+
>
56+
{post.title}
57+
</a>
58+
</p>
59+
))}
60+
</div>
61+
<div>{isFetching ? 'Background Updating...' : ' '}</div>
62+
</>
63+
)}
64+
</div>
65+
</div>
66+
)
67+
}
68+
69+
const getPostById = async (id: number): Promise<Post> => {
70+
const response = await fetch(
71+
`https://jsonplaceholder.typicode.com/posts/${id}`,
72+
)
73+
return await response.json()
74+
}
75+
76+
function usePost(postId: number) {
77+
return useQuery({
78+
queryKey: ['post', postId],
79+
queryFn: () => getPostById(postId),
80+
enabled: !!postId,
81+
})
82+
}
83+
84+
function Post({
85+
postId,
86+
setPostId,
87+
}: {
88+
postId: number
89+
setPostId: React.Dispatch<React.SetStateAction<number>>
90+
}) {
91+
const { status, data, error, isFetching } = usePost(postId)
92+
93+
return (
94+
<div>
95+
<div>
96+
<a onClick={() => setPostId(-1)} href="#">
97+
Back
98+
</a>
99+
</div>
100+
{!postId || status === 'pending' ? (
101+
'Loading...'
102+
) : status === 'error' ? (
103+
<span>Error: {error.message}</span>
104+
) : (
105+
<>
106+
<h1>{data.title}</h1>
107+
<div>
108+
<p>{data.body}</p>
109+
</div>
110+
<div>{isFetching ? 'Background Updating...' : ' '}</div>
111+
</>
112+
)}
113+
</div>
114+
)
115+
}
116+
function usePosts() {
117+
return useQuery({
118+
queryKey: ['posts'],
119+
queryFn: async (): Promise<Array<Post>> => {
120+
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
121+
return await response.json()
122+
},
123+
})
124+
}
17125
function App() {
126+
const [postId, setPostId] = useState(-1)
127+
18128
return (
19129
<div>
130+
<QueryClientProvider
131+
client={queryClient}
132+
>
133+
<p>
134+
As you visit the posts below, you will notice them in a loading state
135+
the first time you load them. However, after you return to this list and
136+
click on any posts you have already visited again, you will see them
137+
load instantly and background refresh right before your eyes!{' '}
138+
<strong>
139+
(You may need to throttle your network speed to simulate longer
140+
loading sequences)
141+
</strong>
142+
</p>
143+
{postId > -1 ? (
144+
<Post postId={postId} setPostId={setPostId} />
145+
) : (
146+
<Posts setPostId={setPostId} />
147+
)}
148+
<Devtools />
149+
</QueryClientProvider>
20150
<h1>TanStack Devtools React Basic Example</h1>
21-
<Devtools />
22151
</div>
23152
)
24153
}

‎examples/react/basic/src/setup.tsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
1+
22
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
33
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
44
import {
@@ -57,26 +57,24 @@ const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
5757

5858
const router = createRouter({ routeTree })
5959

60-
const queryClient = new QueryClient()
6160

6261
export default function DevtoolsExample() {
6362
return (
6463
<>
65-
<QueryClientProvider client={queryClient}>
66-
<TanstackDevtools
67-
plugins={[
68-
{
69-
name: 'Tanstack Query',
70-
render: <ReactQueryDevtoolsPanel />,
71-
},
72-
{
73-
name: 'Tanstack Router',
74-
render: <TanStackRouterDevtoolsPanel router={router} />,
75-
},
76-
]}
77-
/>
78-
<RouterProvider router={router} />
79-
</QueryClientProvider>
64+
<TanstackDevtools
65+
plugins={[
66+
{
67+
name: 'Tanstack Query',
68+
render: <ReactQueryDevtoolsPanel />,
69+
},
70+
{
71+
name: 'Tanstack Router',
72+
render: <TanStackRouterDevtoolsPanel router={router} />,
73+
},
74+
]}
75+
/>
76+
<RouterProvider router={router} />
77+
8078
</>
8179
)
8280
}

‎packages/devtools/src/hooks/detached/use-check-if-still-detached.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
TANSTACK_DEVTOOLS_DETACHED,
55
TANSTACK_DEVTOOLS_DETACHED_OWNER,
66
TANSTACK_DEVTOOLS_IS_DETACHED,
7+
getBooleanFromSession,
78
getBooleanFromStorage,
89
setStorageItem,
910
} from '../../utils/storage'
@@ -14,11 +15,18 @@ export const useCheckIfStillDetached = () => {
1415
const context = useDevtoolsContext()
1516

1617
const checkDetachment = (e: StorageEvent) => {
18+
19+
const isWindowOwner = getBooleanFromSession(TANSTACK_DEVTOOLS_DETACHED_OWNER)
20+
// close the window if the main panel closed it via trigger
21+
if (e.key === TANSTACK_DEVTOOLS_IS_DETACHED && e.newValue === "false" && !isWindowOwner) {
22+
window.close()
23+
}
1724
// We only care about the should_check key
1825
if (e.key !== TANSTACK_DEVTOOLS_CHECK_DETACHED) {
1926
return
2027
}
2128
const isDetached = getBooleanFromStorage(TANSTACK_DEVTOOLS_IS_DETACHED)
29+
2230
if (!isDetached) {
2331
return
2432
}
@@ -33,6 +41,7 @@ export const useCheckIfStillDetached = () => {
3341
const isNotDetachedAnymore = getBooleanFromStorage(
3442
TANSTACK_DEVTOOLS_CHECK_DETACHED,
3543
)
44+
3645
// The window hasn't set it back to true so it is not detached anymore and we clean all the detached state
3746
if (isNotDetachedAnymore) {
3847
setStorageItem(TANSTACK_DEVTOOLS_IS_DETACHED, 'false')

0 commit comments

Comments
 (0)