FilesExpand file tree

master

/

query.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

97 lines (88 loc) · 2.92 KB

master

/

query.tsx

Copy path

Top

File metadata and controls

• Code
• Blame

97 lines (88 loc) · 2.92 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

/**

* PluginQueryClientProvider + usePluginQuery

*

* Plugins share the host application's React Query client so that cache

* entries are deduplicated. `PluginQueryClientProvider` re-uses the existing

* client when running inside the host; when running in isolation (tests,

* storybook) it creates a minimal local client.

*

* `usePluginQuery` is a thin wrapper around `useQuery` that automatically

* prefixes query keys with the plugin id so cache entries are namespaced and

* cannot collide with host or sibling plugin entries.

*/

import {

QueryClient,

QueryClientProvider,

type UseQueryOptions,

type UseQueryResult,

useQuery,

} from "@tanstack/react-query";

import { createContext, type ReactNode, useContext, useMemo } from "react";

// ── Query client context ──────────────────────────────────────────────────────

const QueryClientCtx = createContext<QueryClient | null>(null);

/**

* Re-uses the host's QueryClient if one is already present in the tree,

* otherwise creates an isolated client. Plugins should mount this at the

* root of their component tree.

*/

export function PluginQueryClientProvider({

children,

queryClient,

}: {

children: ReactNode;

/** Pass the host QueryClient instance here if available. */

queryClient?: QueryClient;

}) {

const fallback = useMemo(

() =>

new QueryClient({

defaultOptions: {

queries: { retry: 1, staleTime: 30_000 },

},

}),

[],

);

const client = queryClient ?? fallback;

return (

<QueryClientCtx.Provider value={client}>

<QueryClientProvider client={client}>{children}</QueryClientProvider>

</QueryClientCtx.Provider>

);

}

// ── Namespaced query hook ─────────────────────────────────────────────────────

/**

* Like `useQuery` but automatically namespaces the query key under

* `["plugin", pluginId, ...queryKey]` to avoid cache collisions.

*

* @example

* ```tsx

* const { api, meta } = usePlugin();

* const { data } = usePluginQuery(meta.pluginId, ["items", taskId], () =>

* api.pluginGet(meta.pluginId, `/tasks/${taskId}/items`)

* );

* ```

*/

export function usePluginQuery<TData = unknown, TError = Error>(

pluginId: string,

queryKey: unknown[],

queryFn: () => Promise<TData>,

options?: Omit<

UseQueryOptions<TData, TError, TData, unknown[]>,

"queryKey" | "queryFn"

>,

): UseQueryResult<TData, TError> {

return useQuery<TData, TError, TData, unknown[]>({

...options,

queryKey: ["plugin", pluginId, ...queryKey],

queryFn,

});

}

/** Access the QueryClient from context (for manual invalidation). */

export function usePluginQueryClient(): QueryClient {

const client = useContext(QueryClientCtx);

if (!client)

throw new Error(

"usePluginQueryClient must be inside a <PluginQueryClientProvider>",

);

return client;

}