collectionSubの引数にQueryConstraintを取るようにした

app/firebase/subscription.ts

@@ -3,15 +3,21 @@ import {
   onSnapshot,
   query,
   type FirestoreDataConverter,
+  type QueryConstraint,
 } from "firebase/firestore";
 import { type SWRSubscription } from "swr/subscription";
 
 import { prodDB } from "./firestore";
 
-export const collectionSub = <T>(converter: FirestoreDataConverter<T>) => {
+export const collectionSub = <T>(
+  { converter }: { converter: FirestoreDataConverter<T> },
+  ...queryConstraints: QueryConstraint[]
+) => {
   const sub: SWRSubscription<string, T[], Error> = (key, { next }) => {
     const unsub = onSnapshot(
-      query(collection(prodDB, key)).withConverter(converter),
+      query(collection(prodDB, key), ...queryConstraints).withConverter(
+        converter,
+      ),
       (snapshot) => {
         next(
           null,

app/routes/_header.serve.tsx

@@ -20,7 +20,7 @@ export const clientLoader = async () => {
 export default function Serve() {
   const { data: orders } = useSWRSubscription(
     "orders",
-    collectionSub(orderConverter),
+    collectionSub({ converter: orderConverter }),
   );
 
   return (

app/routes/cashier-v2.tsx

@@ -19,11 +19,11 @@ const keys = ["a", "s", "d", "f", "g", "h", "j", "k", "l", ";"];
 export default function Cashier() {
   const { data: items } = useSWRSubscription(
     "items",
-    collectionSub(itemConverter),
+    collectionSub({ converter: itemConverter }),
   );
   const { data: orders } = useSWRSubscription(
     "orders",
-    collectionSub(orderConverter),
+    collectionSub({ converter: orderConverter }),
   );
   const [orderItems, setOrderItems] = useState<WithId<ItemEntity>[]>([]);
   const submit = useSubmit();

app/routes/items/route.tsx

@@ -30,7 +30,7 @@ export const meta: MetaFunction = () => {
 export default function Item() {
   const { data: items } = useSWRSubscription(
     "items",
-    collectionSub(itemConverter),
+    collectionSub({ converter: itemConverter }),
   );
   const navigation = useNavigation();
   const lastResult = useActionData<typeof addItem>();

app/routes/master.tsx

@@ -1,4 +1,5 @@
 import { type MetaFunction } from "@remix-run/react";
+import { orderBy } from "firebase/firestore";
 import useSWRSubscription from "swr/subscription";
 
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
@@ -10,10 +11,10 @@ export const meta: MetaFunction = () => {
   return [{ title: "マスター画面" }];
 };
 
-export default function Serve() {
+export default function FielsOfMaster() {
   const { data: orders } = useSWRSubscription(
     "orders",
-    collectionSub(orderConverter),
+    collectionSub({ converter: orderConverter }, orderBy("orderId", "desc")),
   );
 
   return (