refactor(frontend): Refactor query options factory

Add missing mutation key so that pending state is rendered

frontend/src/components/LocateForm.tsx

@@ -24,7 +24,6 @@ import {
 import { Input } from "~/components/ui/Input";
 import { Label, labelVariants } from "~/components/ui/Label";
 import { Toggle } from "~/components/ui/Toggle";
-import { locate } from "~/lib/fetchers";
 import { useGeolocation } from "~/lib/hooks";
 import { queryOptionsFactory } from "~/lib/queryOptionsFactory";
 import { LocateFormSchema } from "~/lib/schemas";
@@ -47,7 +46,7 @@ export function LocateForm() {
     setEnabled: setGpsEnabled,
   } = useGeolocation({});
 
-  const mutation = useMutation({ mutationFn: locate });
+  const mutation = useMutation(queryOptionsFactory.restaurants.mutation());
   const queryClient = useQueryClient();
 
   function handleGpsPressed(pressed: boolean) {
@@ -80,10 +79,7 @@ export function LocateForm() {
     if (!mutation.isPending) {
       mutation.mutate(data, {
         onSuccess: (data) => {
-          queryClient.setQueryData(
-            queryOptionsFactory.restaurants(queryClient).queryKey,
-            data,
-          );
+          queryClient.setQueryData(queryOptionsFactory.restaurants.key, data);
         },
       });
     }

frontend/src/components/pages/Flavors.tsx

@@ -4,7 +4,7 @@ import { FlavorCard, FlavorCardSkeleton } from "~/components/FlavorCard";
 import { queryOptionsFactory } from "~/lib/queryOptionsFactory";
 
 export function Flavors() {
-  const { data, isLoading } = useSuspenseQuery(queryOptionsFactory.flavors);
+  const { data, isLoading } = useSuspenseQuery(queryOptionsFactory.flavors());
 
   return (
     <>

frontend/src/components/pages/Locate.tsx

@@ -9,7 +9,7 @@ import { queryOptionsFactory } from "~/lib/queryOptionsFactory";
 
 export function Locate() {
   const queryClient = useQueryClient();
-  const { data } = useQuery(queryOptionsFactory.restaurants(queryClient));
+  const { data } = useQuery(queryOptionsFactory.restaurants.query(queryClient));
 
   const isPending = useIsMutating({ mutationKey: ["restaurants"] }) > 0;
   const isEmpty = (data?.length ?? -1) === 0;

frontend/src/lib/queryOptionsFactory.ts

@@ -1,6 +1,6 @@
 import { queryOptions } from "@tanstack/react-query";
 
-import { getFlavor, getFlavors, getRestaurant } from "~/lib/fetchers";
+import { getFlavor, getFlavors, getRestaurant, locate } from "~/lib/fetchers";
 import { RestaurantsData } from "~/lib/types";
 
 import type { QueryClient } from "@tanstack/react-query";
@@ -11,19 +11,27 @@ export const queryOptionsFactory = {
       queryKey: ["restaurant", slug],
       queryFn: ({ queryKey }) => getRestaurant(queryKey[1]),
     }),
-  restaurants: (queryClient: QueryClient) =>
-    queryOptions({
-      queryKey: ["restaurants"],
-      queryFn: ({ queryKey }) =>
-        queryClient.getQueryData<RestaurantsData>(queryKey) ?? null,
+  restaurants: {
+    key: ["restaurants"] as const,
+    mutation: () => ({
+      mutationKey: queryOptionsFactory.restaurants.key,
+      mutationFn: locate,
     }),
+    query: (queryClient: QueryClient) =>
+      queryOptions({
+        queryKey: queryOptionsFactory.restaurants.key,
+        queryFn: ({ queryKey }) =>
+          queryClient.getQueryData<RestaurantsData>(queryKey) ?? null,
+      }),
+  },
   flavor: (slug: string) =>
     queryOptions({
       queryKey: ["flavor", slug],
       queryFn: ({ queryKey }) => getFlavor(queryKey[1]),
     }),
-  flavors: queryOptions({
-    queryKey: ["flavors"],
-    queryFn: getFlavors,
-  }),
+  flavors: () =>
+    queryOptions({
+      queryKey: ["flavors"],
+      queryFn: getFlavors,
+    }),
 };

frontend/src/routes/flavors.tsx

@@ -8,6 +8,6 @@ export const flavorsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/flavors",
   loader: ({ context: { queryClient } }) =>
-    queryClient.ensureQueryData(queryOptionsFactory.flavors),
+    queryClient.ensureQueryData(queryOptionsFactory.flavors()),
   component: () => <Flavors />,
 });