Use query factory

client/src/hooks/rpc/index.tsx

@@ -1,11 +1,30 @@
-import { Code, ConnectError, type Interceptor } from "@connectrpc/connect";
-import { TransportProvider, useQuery } from "@connectrpc/connect-query";
+import {
+  Code,
+  ConnectError,
+  type Interceptor,
+  type Transport,
+} from "@connectrpc/connect";
+import {
+  TransportProvider,
+  createQueryOptions,
+  useTransport,
+} from "@connectrpc/connect-query";
 import { createConnectTransport } from "@connectrpc/connect-web";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  QueryClient,
+  QueryClientProvider,
+  queryOptions,
+} from "@tanstack/react-query";
 import type { User as FirebaseUser } from "firebase/auth";
 import { useMemo } from "react";
 
 import { useFirebase } from "@/hooks/firebase";
+import {
+  type GetChatMessagesRequest,
+  getChatMessages,
+  getChats,
+} from "@aiceo/frontendapi";
+import type { PlainMessage } from "@bufbuild/protobuf";
 
 const MAX_RETRIES = 3;
 
@@ -31,6 +50,27 @@ function canRetry(error: Error): boolean {
   }
 }
 
+class FrontendQueries {
+  constructor(readonly transport: Transport) {}
+
+  getChats() {
+    return queryOptions(
+      createQueryOptions(getChats, {}, { transport: this.transport }),
+    );
+  }
+
+  getChatMessages(req: PlainMessage<GetChatMessagesRequest>) {
+    return queryOptions(
+      createQueryOptions(getChatMessages, req, { transport: this.transport }),
+    );
+  }
+}
+
+export function useFrontendQueries(): FrontendQueries {
+  const transport = useTransport();
+  return useMemo(() => new FrontendQueries(transport), [transport]);
+}
+
 export function FrontendServiceProvider({
   children,
 }: { children: React.ReactNode }) {

client/src/pages/chats/+Page.tsx

@@ -1,9 +1,10 @@
-import { getChats } from "@aiceo/frontendapi";
-import { useQuery } from "@connectrpc/connect-query";
+import { useFrontendQueries } from "@/hooks/rpc";
 import { Link } from "@nextui-org/link";
+import { useQuery } from "@tanstack/react-query";
 
 export default function Page() {
-  const { data: chatsRes, isPending } = useQuery(getChats, {});
+  const queries = useFrontendQueries();
+  const { data: chatsRes, isPending } = useQuery(queries.getChats());
 
   if (isPending) {
     return <div>Loading...</div>;

client/src/pages/chats/@id/+Page.tsx

@@ -1,57 +1,30 @@
-import {
-  GetChatMessagesResponse,
-  getChatMessages,
-  sendMessage,
-} from "@aiceo/frontendapi";
-import {
-  type MethodUnaryDescriptor,
-  createQueryOptions,
-  type disableQuery,
-  useMutation,
-  useQuery,
-  useTransport,
-} from "@connectrpc/connect-query";
+import { GetChatMessagesResponse, sendMessage } from "@aiceo/frontendapi";
+import { useMutation } from "@connectrpc/connect-query";
 import { usePageContext } from "vike-react/usePageContext";
 
 import { ChatMessage } from "@/components/ChatMessage";
-import type { Message, PartialMessage } from "@bufbuild/protobuf";
+import { useFrontendQueries } from "@/hooks/rpc";
 import { Button } from "@nextui-org/button";
-import { queryOptions, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 type PressEvent = Parameters<
   NonNullable<React.ComponentProps<typeof Button>["onPress"]>
 >[0];
 
-// https://github.com/connectrpc/connect-query-es/issues/467
-function useQueryWithKey<Req extends Message<Req>, Resp extends Message<Resp>>(
-  svc: MethodUnaryDescriptor<Req, Resp>,
-  req: typeof disableQuery | PartialMessage<Req> | undefined,
-) {
-  const transport = useTransport();
-  const opts = queryOptions(createQueryOptions(svc, req, { transport }));
-  return {
-    ...useQuery(svc, req),
-    queryKey: opts.queryKey,
-  };
-}
-
 export default function Page() {
   const pageContext = usePageContext();
   const chatId = pageContext.routeParams.id;
 
-  const {
-    data: messagesRes,
-    isPending,
-    queryKey,
-  } = useQueryWithKey(getChatMessages, {
-    chatId,
-  });
+  const queries = useFrontendQueries();
+  const getMessagesQuery = queries.getChatMessages({ chatId });
+
+  const { data: messagesRes, isPending } = useQuery(getMessagesQuery);
 
   const queryClient = useQueryClient();
   const doSendMessage = useMutation(sendMessage, {
     onSuccess: (resp) => {
-      queryClient.setQueryData(queryKey, (prev) => {
+      queryClient.setQueryData(getMessagesQuery.queryKey, (prev) => {
         const obj = prev ?? new GetChatMessagesResponse();
         obj.messages = [...obj.messages, ...resp.messages];
         return obj;