Add useNamedQuery hook

packages/react/src/firestore/index.ts

@@ -9,4 +9,4 @@ export { useDocumentQuery } from "./useDocumentQuery";
 export { useCollectionQuery } from "./useCollectionQuery";
 // useGetCountFromServerQuery
 // useGetAggregateFromServerQuery
-// useNamedQuery
+export { useNamedQuery } from "./useNamedQuery";

packages/react/src/firestore/useNamedQuery.test.tsx

@@ -0,0 +1,35 @@
+import React, { type ReactNode } from "react";
+import { describe, expect, test, beforeEach } from "vitest";
+import { useNamedQuery } from "./useNamedQuery";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { firestore, wipeFirestore } from "~/testing-utils";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe("useNamedQuery", () => {
+  beforeEach(async () => await wipeFirestore());
+
+  test("returns correct data for an existing named query", async () => {
+    const { result } = renderHook(
+      () =>
+        useNamedQuery(firestore, "emptyCollectionQuery", {
+          queryKey: ["named", "empty"],
+        }),
+      { wrapper }
+    );
+
+    await waitFor(async () => {});
+  });
+});

packages/react/src/firestore/useNamedQuery.ts

@@ -0,0 +1,27 @@
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
+import {
+  type FirestoreError,
+  type Query,
+  type DocumentData,
+  namedQuery,
+  type Firestore,
+} from "firebase/firestore";
+
+type FirestoreUseQueryOptions<TData = unknown, TError = Error> = Omit<
+  UseQueryOptions<TData, TError>,
+  "queryFn"
+>;
+
+export function useNamedQuery<
+  AppModelType = DocumentData,
+  DbModelType extends DocumentData = DocumentData
+>(
+  firestore: Firestore,
+  name: string,
+  options: FirestoreUseQueryOptions<Query | null, FirestoreError>
+) {
+  return useQuery<Query | null, FirestoreError>({
+    ...options,
+    queryFn: () => namedQuery(firestore, name),
+  });
+}