Skip to content

Commit 3a3f07b

Browse files
keiko233keiko233
committed
feat: mutation provider use refetchQueries fn
1 parent d19ec77 commit 3a3f07b

File tree

5 files changed

+92
-77
lines changed

5 files changed

+92
-77
lines changed

‎frontend/interface/src/ipc/consts.ts

+15
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,21 @@ export const CLASH_MEMORY_QUERY_KEY = 'clash-memory'
4343
*/
4444
export const CLASH_CONNECTIONS_QUERY_KEY = 'clash-connections'
4545

46+
/**
47+
* Clash config query key, used by useClashConfig hook
48+
*/
49+
export const CLASH_CONFIG_QUERY_KEY = 'clash-config'
50+
51+
/**
52+
* Clash core query key, used by useClashCores hook
53+
*/
54+
export const CLASH_CORE_QUERY_KEY = 'clash-core'
55+
56+
/**
57+
* Clash info query key, used by useClashInfo hook
58+
*/
59+
export const CLASH_INFO_QUERY_KEY = 'clash-info'
60+
4661
/**
4762
* Maximum connections history length, used by clash ws provider to limit connections history length
4863
*/

‎frontend/interface/src/ipc/use-clash-config.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
22
import { ClashConfig, useClashAPI } from '../service/clash-api'
33
import { unwrapResult } from '../utils'
44
import { commands, PatchRuntimeConfig } from './bindings'
5+
import { CLASH_CONFIG_QUERY_KEY } from './consts'
56

67
/**
78
* A hook that manages fetching and updating the Clash configuration.
@@ -38,7 +39,7 @@ export const useClashConfig = () => {
3839
* @see useQuery - For additional configuration options and usage details.
3940
*/
4041
const query = useQuery({
41-
queryKey: ['clash-config'],
42+
queryKey: [CLASH_CONFIG_QUERY_KEY],
4243
queryFn: configs,
4344
})
4445

@@ -64,7 +65,7 @@ export const useClashConfig = () => {
6465
return unwrapResult(await commands.patchClashConfig(payload))
6566
},
6667
onSuccess: () => {
67-
queryClient.invalidateQueries({ queryKey: ['clash-config'] })
68+
queryClient.invalidateQueries({ queryKey: [CLASH_CONFIG_QUERY_KEY] })
6869
},
6970
})
7071

‎frontend/interface/src/ipc/use-clash-cores.ts

+11-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { kebabCase } from 'lodash-es'
22
import { unwrapResult } from '@/utils'
33
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
44
import { commands, type ClashCore } from './bindings'
5-
import { CLASH_VERSION_QUERY_KEY } from './consts'
5+
import {
6+
CLASH_CORE_QUERY_KEY,
7+
CLASH_VERSION_QUERY_KEY,
8+
NYANPASU_SETTING_QUERY_KEY,
9+
} from './consts'
610

711
export const ClashCores = {
812
clash: 'Clash Premium',
@@ -24,7 +28,7 @@ export const useClashCores = () => {
2428
const queryClient = useQueryClient()
2529

2630
const query = useQuery({
27-
queryKey: ['clash-core'],
31+
queryKey: [CLASH_CORE_QUERY_KEY],
2832
queryFn: async () => {
2933
return await Object.keys(ClashCores).reduce(
3034
async (acc, key) => {
@@ -61,7 +65,7 @@ export const useClashCores = () => {
6165
}
6266

6367
const currentData = queryClient.getQueryData([
64-
'clash-core',
68+
CLASH_CORE_QUERY_KEY,
6569
]) as ClashCoresInfo
6670

6771
if (currentData && results) {
@@ -78,7 +82,7 @@ export const useClashCores = () => {
7882
}
7983
})
8084

81-
queryClient.setQueryData(['clash-core'], updatedData)
85+
queryClient.setQueryData([CLASH_CORE_QUERY_KEY], updatedData)
8286
}
8387
return results
8488
},
@@ -89,7 +93,7 @@ export const useClashCores = () => {
8993
return unwrapResult(await commands.updateCore(core))
9094
},
9195
onSuccess: () => {
92-
queryClient.invalidateQueries({ queryKey: ['clash-core'] })
96+
queryClient.invalidateQueries({ queryKey: [CLASH_CORE_QUERY_KEY] })
9397
},
9498
})
9599

@@ -98,8 +102,8 @@ export const useClashCores = () => {
98102
return unwrapResult(await commands.changeClashCore(core))
99103
},
100104
onSuccess: () => {
101-
queryClient.invalidateQueries({ queryKey: ['clash-core'] })
102-
queryClient.invalidateQueries({ queryKey: ['settings'] })
105+
queryClient.invalidateQueries({ queryKey: [CLASH_CORE_QUERY_KEY] })
106+
queryClient.invalidateQueries({ queryKey: [NYANPASU_SETTING_QUERY_KEY] })
103107
queryClient.invalidateQueries({ queryKey: [CLASH_VERSION_QUERY_KEY] })
104108
},
105109
})

‎frontend/interface/src/ipc/use-clash-info.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { unwrapResult } from '@/utils'
22
import { useQuery } from '@tanstack/react-query'
33
import { commands } from './bindings'
4+
import { CLASH_INFO_QUERY_KEY } from './consts'
45

56
/**
67
* A hook that retrieves and returns clash information using react-query.
@@ -14,7 +15,7 @@ import { commands } from './bindings'
1415
*/
1516
export const useClashInfo = () => {
1617
const query = useQuery({
17-
queryKey: ['clash-info'],
18+
queryKey: [CLASH_INFO_QUERY_KEY],
1819
queryFn: async () => {
1920
return unwrapResult(await commands.getClashInfo())
2021
},

‎frontend/interface/src/provider/mutation-provider.tsx

+61-67
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,84 @@
11
import { useMount } from 'ahooks'
22
import { PropsWithChildren, useRef } from 'react'
3+
import { useQueryClient } from '@tanstack/react-query'
34
import { listen, type UnlistenFn } from '@tauri-apps/api/event'
45
import {
6+
CLASH_CONFIG_QUERY_KEY,
7+
CLASH_INFO_QUERY_KEY,
8+
CLASH_VERSION_QUERY_KEY,
59
NYANPASU_BACKEND_EVENT_NAME,
6-
useClashConfig,
7-
useClashInfo,
8-
useClashVersion,
9-
useSettings,
10-
useSystemProxy,
11-
} from '../ipc'
10+
NYANPASU_SETTING_QUERY_KEY,
11+
NYANPASU_SYSTEM_PROXY_QUERY_KEY,
12+
} from '../ipc/consts'
1213

1314
type EventPayload = 'nyanpasu_config' | 'clash_config' | 'proxies' | 'profiles'
1415

16+
const NYANPASU_CONFIG_MUTATION_KEYS = [
17+
NYANPASU_SETTING_QUERY_KEY,
18+
NYANPASU_SYSTEM_PROXY_QUERY_KEY,
19+
// TODO: proxies hook refetch
20+
// TODO: profiles hook refetch
21+
] as const
22+
23+
const CLASH_CONFIG_MUTATION_KEYS = [
24+
CLASH_VERSION_QUERY_KEY,
25+
CLASH_INFO_QUERY_KEY,
26+
CLASH_CONFIG_QUERY_KEY,
27+
// TODO: clash rules hook refetch
28+
// TODO: clash rules providers hook refetch
29+
// TODO: proxies hook refetch
30+
// TODO: proxies providers hook refetch
31+
// TODO: profiles hook refetch
32+
// TODO: all profiles providers hook refetch, key.includes('getAllProxiesProviders')
33+
] as const
34+
35+
const PROFILES_MUTATION_KEYS = [
36+
CLASH_VERSION_QUERY_KEY,
37+
CLASH_INFO_QUERY_KEY,
38+
// TODO: clash rules hook refetch
39+
// TODO: clash rules providers hook refetch
40+
// TODO: proxies hook refetch
41+
// TODO: proxies providers hook refetch
42+
// TODO: profiles hook refetch
43+
// TODO: all profiles providers hook refetch, key.includes('getAllProxiesProviders')
44+
]
45+
46+
const PROXIES_MUTATION_KEYS = [
47+
// TODO: key.includes('getProxies')
48+
] as const
49+
1550
export const MutationProvider = ({ children }: PropsWithChildren) => {
1651
const unlistenFn = useRef<UnlistenFn>(null)
1752

18-
const settings = useSettings()
19-
20-
const systemProxy = useSystemProxy()
21-
22-
const clashVersion = useClashVersion()
53+
const queryClient = useQueryClient()
2354

24-
const clashInfo = useClashInfo()
25-
26-
const clashConfig = useClashConfig()
55+
const refetchQueries = (keys: readonly string[]) => {
56+
Promise.all(
57+
keys.map((key) =>
58+
queryClient.refetchQueries({
59+
queryKey: [key],
60+
}),
61+
),
62+
).catch((e) => console.error(e))
63+
}
2764

2865
useMount(() => {
2966
listen<EventPayload>(NYANPASU_BACKEND_EVENT_NAME, ({ payload }) => {
30-
switch (payload) {
31-
case 'nyanpasu_config': {
32-
Promise.all([
33-
settings.query.refetch(),
34-
systemProxy.refetch(),
35-
// TODO: proxies hook refetch
36-
// TODO: profiles hook refetch
37-
]).catch((e) => {
38-
console.error(e)
39-
})
67+
console.log('MutationProvider', payload)
4068

69+
switch (payload) {
70+
case 'nyanpasu_config':
71+
refetchQueries(NYANPASU_CONFIG_MUTATION_KEYS)
4172
break
42-
}
43-
44-
case 'clash_config': {
45-
Promise.all([
46-
clashVersion.refetch(),
47-
clashInfo.refetch(),
48-
clashConfig.query.refetch(),
49-
// TODO: clash rules hook refetch
50-
// TODO: clash rules providers hook refetch
51-
// TODO: proxies hook refetch
52-
// TODO: proxies providers hook refetch
53-
// TODO: profiles hook refetch
54-
// TODO: all profiles providers hook refetch, key.includes('getAllProxiesProviders')
55-
]).catch((e) => {
56-
console.error(e)
57-
})
58-
73+
case 'clash_config':
74+
refetchQueries(CLASH_CONFIG_MUTATION_KEYS)
5975
break
60-
}
61-
62-
case 'profiles': {
63-
Promise.all([
64-
clashVersion.refetch(),
65-
clashInfo.refetch(),
66-
// TODO: clash rules hook refetch
67-
// TODO: clash rules providers hook refetch
68-
// TODO: proxies hook refetch
69-
// TODO: proxies providers hook refetch
70-
// TODO: profiles hook refetch
71-
// TODO: all profiles providers hook refetch, key.includes('getAllProxiesProviders')
72-
]).catch((e) => {
73-
console.error(e)
74-
})
75-
76+
case 'profiles':
77+
refetchQueries(PROFILES_MUTATION_KEYS)
7678
break
77-
}
78-
79-
case 'proxies': {
80-
Promise.all([
81-
// TODO: key.includes('getProxies')
82-
]).catch((e) => {
83-
console.error(e)
84-
})
85-
79+
case 'proxies':
80+
refetchQueries(PROXIES_MUTATION_KEYS)
8681
break
87-
}
8882
}
8983
})
9084
.then((unlisten) => {

0 commit comments

Comments
 (0)