feat: expose querykey getter and fix some querykey stuff

examples/minimal-react/client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^4.3.8",
+    "@tanstack/react-query-devtools": "^4.3.8",
     "@trpc/client": "^10.4.0",
     "@trpc/react-query": "^10.4.0",
     "@trpc/server": "^10.4.0",

examples/minimal-react/client/src/App.tsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { httpBatchLink } from '@trpc/client';
 import { useState } from 'react';
 import { Greeting } from './Greeting';
@@ -19,6 +20,7 @@ export function App() {
     <trpc.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
         <Greeting />
+        <ReactQueryDevtools />
       </QueryClientProvider>
     </trpc.Provider>
   );

examples/minimal-react/client/src/Greeting.tsx

@@ -1,7 +1,23 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { trpc } from './utils/trpc';
 
 export function Greeting() {
-  const greeting = trpc.greeting.useQuery({ name: 'tRPC user' });
+  const qc = useQueryClient();
+  const utils = trpc.useContext();
 
-  return <div>{greeting.data?.text}</div>;
+  const greeting = trpc.greeting.useQuery();
+  const qKey = utils.greeting.getQueryKey();
+
+  const isFetching = qc.isFetching({ queryKey: qKey });
+
+  console.log('qKey', qKey);
+  console.log('isFetching', isFetching);
+
+  return (
+    <div>
+      {greeting.data?.text ?? 'Loading...'}
+      {!!isFetching && ' (fetching)'}
+      <button onClick={() => greeting.refetch()}></button>
+    </div>
+  );
 }

examples/minimal-react/server/index.ts

@@ -19,12 +19,13 @@ const appRouter = router({
     .input(
       z
         .object({
-          name: z.string().nullish(),
+          name: z.string(),
         })
         .nullish(),
     )
-    .query(({ input }) => {
+    .query(async ({ input }) => {
       // This is what you're returning to your client
+      await new Promise((resolve) => setTimeout(resolve, 1000));
       return {
         text: `hello ${input?.name ?? 'world'}`,
         // 💡 Tip: Try adding a new property here and see it propagate to the client straight-away

packages/react-query/src/internals/getArrayQueryKey.ts

@@ -1,5 +1,9 @@
 export type QueryType = 'query' | 'infinite' | 'any';
 
+export type QueryKey = [
+  string[],
+  { input?: unknown; type?: Exclude<QueryType, 'any'> },
+];
 /**
  * To allow easy interactions with groups of related queries, such as
  * invalidating all queries of a router, we use an array as the path when
@@ -10,7 +14,7 @@ export type QueryType = 'query' | 'infinite' | 'any';
 export function getArrayQueryKey(
   queryKey: string | [string] | [string, ...unknown[]] | unknown[],
   type: QueryType,
-): [string[], { input?: unknown; type?: Exclude<QueryType, 'any'> }] {
+): QueryKey {
   const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [queryKey];
   const [path, input] = queryKeyArrayed;
 

packages/react-query/src/shared/proxy/utilsProxy.ts

@@ -29,6 +29,7 @@ import {
   TRPCFetchQueryOptions,
   contextProps,
 } from '../../internals/context';
+import { QueryKey, getArrayQueryKey } from '../../internals/getArrayQueryKey';
 import { getQueryKey } from '../../internals/getQueryKey';
 
 type DecorateProcedure<
@@ -158,6 +159,18 @@ type DecorateProcedure<
   getInfiniteData(
     input?: inferProcedureInput<TProcedure>,
   ): InfiniteData<inferTransformedProcedureOutput<TProcedure>> | undefined;
+
+  /**
+   * Method to extract the query key for a given procedure
+   * @link https://trpc.io/docs/queries#query-key
+   */
+  getQueryKey(input: inferProcedureInput<TProcedure>): QueryKey;
+
+  /**
+   * Method to extract the query key for a given procedure
+   * @link https://trpc.io/docs/queries#query-key
+   */
+  getInfiniteQueryKey(input: inferProcedureInput<TProcedure>): QueryKey;
 };
 
 /**
@@ -174,6 +187,12 @@ type DecorateRouter = {
     filters?: InvalidateQueryFilters,
     options?: InvalidateOptions,
   ): Promise<void>;
+
+  /**
+   * Method to extract the query key for a given procedure
+   * @link https://trpc.io/docs/queries#query-key
+   */
+  getQueryKey(): QueryKey;
 };
 
 /**
@@ -265,6 +284,8 @@ export function createReactQueryUtilsProxy<
           context.setInfiniteQueryData(queryKey, updater, ...rest),
         getData: () => context.getQueryData(queryKey),
         getInfiniteData: () => context.getInfiniteQueryData(queryKey),
+        getQueryKey: () => getArrayQueryKey(queryKey, 'query'),
+        getInfiniteQueryKey: () => getArrayQueryKey(queryKey, 'infinite'),
       };
 
       return contextMap[utilName]();

packages/tests/server/react/useContext.test.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { getServerAndReactClient } from './__reactHelpers';
+import { useQueryClient } from '@tanstack/react-query';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { initTRPC } from '@trpc/server/src/core';
@@ -798,4 +799,119 @@ describe('query keys are stored separtely', () => {
     `);
     expect(data.infinite).toBeUndefined();
   });
+
+  describe('getQueryKeys', () => {
+    test('no input', async () => {
+      const { proxy, App } = ctx;
+
+      function MyComponent() {
+        const utils = proxy.useContext();
+        const happy = utils.post.all.getQueryKey();
+
+        // @ts-expect-error - post.all has no input
+        const sad = utils.post.all.getQueryKey('foo');
+
+        return <pre data-testid="qKey">{JSON.stringify(happy)}</pre>;
+      }
+
+      const utils = render(
+        <App>
+          <MyComponent />
+        </App>,
+      );
+
+      await waitFor(() => {
+        expect(utils.getByTestId('qKey')).toHaveTextContent(
+          JSON.stringify([['post', 'all'], { type: 'query' }]),
+        );
+      });
+    });
+
+    test('with input', async () => {
+      const { proxy, App } = ctx;
+
+      function MyComponent() {
+        const utils = proxy.useContext();
+        const happy = utils.post.byId.getQueryKey({ id: 1 });
+
+        // @ts-expect-error - post.byId has required input
+        const sad1 = utils.post.byId.getQueryKey();
+        // @ts-expect-error - id should be a number
+        const sad2 = utils.post.byId.getQueryKey({ id: '1' });
+
+        return <pre data-testid="qKey">{JSON.stringify(happy)}</pre>;
+      }
+
+      const utils = render(
+        <App>
+          <MyComponent />
+        </App>,
+      );
+
+      await waitFor(() => {
+        expect(utils.getByTestId('qKey')).toHaveTextContent(
+          JSON.stringify([
+            ['post', 'byId'],
+            { input: { id: 1 }, type: 'query' },
+          ]),
+        );
+      });
+    });
+
+    test('on router', async () => {
+      const { proxy, App } = ctx;
+
+      function MyComponent() {
+        const utils = proxy.useContext();
+        const happy = utils.post.getQueryKey();
+
+        // @ts-expect-error - router has no input
+        const sad = utils.post.getQueryKey('foo');
+
+        return (
+          <div>
+            <pre data-testid="qKey">{JSON.stringify(happy)}</pre>
+          </div>
+        );
+      }
+
+      const utils = render(
+        <App>
+          <MyComponent />
+        </App>,
+      );
+
+      await waitFor(() => {
+        expect(utils.getByTestId('qKey')).toHaveTextContent(
+          JSON.stringify([['post']]),
+        );
+      });
+    });
+
+    test('forwarded to a real method', async () => {
+      const { proxy, App } = ctx;
+
+      function MyComponent() {
+        const utils = proxy.useContext();
+        const qc = useQueryClient();
+
+        const key = utils.post.all.getQueryKey();
+        const isFetching = qc.isFetching({ queryKey: key });
+
+        return <pre data-testid="isFetching">{isFetching}</pre>;
+      }
+
+      const utils = render(
+        <App>
+          <MyComponent />
+        </App>,
+      );
+
+      // should be fetching initially, and then not
+      expect(utils.container).toHaveTextContent('1');
+      await waitFor(() => {
+        expect(utils.container).toHaveTextContent('0');
+      });
+    });
+  });
 });