Add query key prop

Author: owjs3901

.changepacks/changepack_log_B8PyNwzJIGUUYGHAmI-Vt.json

@@ -0,0 +1 @@
+{"changes":{"packages/react-query/package.json":"Patch"},"note":"Add query key prop","date":"2026-02-24T07:16:01.813633Z"}

packages/react-query/src/__tests__/index.test.ts

@@ -7,5 +7,6 @@ test('index.ts exports', () => {
   expect({ ...indexModule }).toEqual({
     createQueryClient: expect.any(Function),
     DevupQueryClient: expect.any(Function),
+    getQueryKey: expect.any(Function),
   })
 })

packages/react-query/src/__tests__/query-client.test.tsx

@@ -53,6 +53,7 @@ test('DevupQueryClient useQuery with GET method', async () => {
   )
 
   expect(result.current.data).toEqual({ id: 1, name: 'test' })
+  expect(result.current.queryKey).toEqual(['get', '/test'])
 })
 
 test('DevupQueryClient useQuery with options', async () => {
@@ -75,6 +76,11 @@ test('DevupQueryClient useQuery with options', async () => {
   )
 
   expect(result.current.data).toEqual({ id: 1, name: 'test' })
+  expect(result.current.queryKey).toEqual([
+    'get',
+    '/test',
+    { params: { id: '123' } },
+  ])
 })
 
 test('DevupQueryClient useQuery with queryOptions', async () => {
@@ -97,6 +103,7 @@ test('DevupQueryClient useQuery with queryOptions', async () => {
   )
 
   expect(result.current.data).toEqual({ id: 1, name: 'test' })
+  expect(result.current.queryKey).toEqual(['get', '/test'])
 })
 
 test('DevupQueryClient useMutation with POST method', async () => {
@@ -176,6 +183,7 @@ test('DevupQueryClient useSuspenseQuery with GET method', async () => {
   )
 
   expect(result.current.data).toEqual({ id: 1, name: 'test' })
+  expect(result.current.queryKey).toEqual(['get', '/test'])
 })
 
 test('DevupQueryClient useSuspenseQuery with options', async () => {
@@ -198,6 +206,11 @@ test('DevupQueryClient useSuspenseQuery with options', async () => {
   )
 
   expect(result.current.data).toEqual({ id: 1, name: 'test' })
+  expect(result.current.queryKey).toEqual([
+    'get',
+    '/test',
+    { params: { id: '123' } },
+  ])
 })
 
 test('DevupQueryClient useInfiniteQuery with GET method', async () => {
@@ -224,6 +237,7 @@ test('DevupQueryClient useInfiniteQuery with GET method', async () => {
     pages: [{ id: 1, name: 'test' }],
     pageParams: [1],
   })
+  expect(result.current.queryKey).toEqual(['get', '/test', {}])
 })
 
 test('DevupQueryClient useInfiniteQuery with options', async () => {
@@ -251,6 +265,11 @@ test('DevupQueryClient useInfiniteQuery with options', async () => {
     pages: [{ id: 1, name: 'test' }],
     pageParams: [1],
   })
+  expect(result.current.queryKey).toEqual([
+    'get',
+    '/test',
+    { query: { page: 1 } },
+  ])
 })
 
 test('DevupQueryClient useQuery with different HTTP methods', async () => {

packages/react-query/src/index.ts

@@ -1,2 +1,2 @@
 export { createQueryClient } from './create-query-client'
-export { DevupQueryClient } from './query-client'
+export { DevupQueryClient, getQueryKey } from './query-client'

packages/react-query/src/query-client.ts

@@ -56,10 +56,13 @@ export class DevupQueryClient<S extends ConditionalKeys<DevupApiServers>> {
         queryClient?: Parameters<typeof useQuery<D, E>>[1],
       ]
     >
-  ): ReturnType<typeof useQuery<D, E>> {
-    return useQuery<D, E>(
+  ): ReturnType<typeof useQuery<D, E>> & {
+    queryKey: [M, T, ...unknown[]]
+  } {
+    const queryKey = getQueryKey(method, path, options[0])
+    const result = useQuery<D, E>(
       {
-        queryKey: getQueryKey(method, path, options[0]),
+        queryKey,
         queryFn: ({
           queryKey: [method, path, ...options],
           signal,
@@ -78,6 +81,7 @@ export class DevupQueryClient<S extends ConditionalKeys<DevupApiServers>> {
       },
       options[2],
     )
+    return Object.assign(result, { queryKey })
   }
 
   useMutation<
@@ -134,10 +138,13 @@ export class DevupQueryClient<S extends ConditionalKeys<DevupApiServers>> {
         queryClient?: Parameters<typeof useSuspenseQuery<D, E>>[1],
       ]
     >
-  ): ReturnType<typeof useSuspenseQuery<D, E>> {
-    return useSuspenseQuery<D, E, D>(
+  ): ReturnType<typeof useSuspenseQuery<D, E>> & {
+    queryKey: [M, T, ...unknown[]]
+  } {
+    const queryKey = getQueryKey(method, path, options[0])
+    const result = useSuspenseQuery<D, E, D>(
       {
-        queryKey: getQueryKey(method, path, options[0]),
+        queryKey,
         queryFn: ({
           queryKey: [method, path, ...options],
           signal,
@@ -156,6 +163,7 @@ export class DevupQueryClient<S extends ConditionalKeys<DevupApiServers>> {
       },
       options[2],
     )
+    return Object.assign(result, { queryKey })
   }
 
   useInfiniteQuery<
@@ -180,13 +188,16 @@ export class DevupQueryClient<S extends ConditionalKeys<DevupApiServers>> {
       >,
       queryClient?: Parameters<typeof useInfiniteQuery<D, E>>[1],
     ]
-  ): ReturnType<typeof useInfiniteQuery<D, E>> {
+  ): ReturnType<typeof useInfiniteQuery<D, E>> & {
+    queryKey: [M, T, ...unknown[]]
+  } {
     const { getNextPageParam, initialPageParam, ...apiOptions } = options[0]
-    return useInfiniteQuery<D, E>(
+    const queryKey = getQueryKey(method, path, apiOptions)
+    const result = useInfiniteQuery<D, E>(
       {
         getNextPageParam,
         initialPageParam,
-        queryKey: getQueryKey(method, path, apiOptions),
+        queryKey,
         queryFn: ({ queryKey, pageParam, signal }): Promise<D> => {
           const [methodKey, pathKey, ...restOptions] = queryKey
           const apiOptions = restOptions[0] as DevupApiRequestInit | undefined
@@ -212,6 +223,7 @@ export class DevupQueryClient<S extends ConditionalKeys<DevupApiServers>> {
       } as Parameters<typeof useInfiniteQuery<D, E>>[0],
       options[2],
     )
+    return Object.assign(result, { queryKey })
   }
 
   useQueries<