Refactor to React Query hydration pattern and fix favorites bug

The favorite toggle on listing detail pages was broken because the
backend retrieve view did not pass request context to the serializer,
so is_favorited always returned false. Additionally, the frontend
stored favorite state in a separate query with staleTime: Infinity
that could never self-correct.

This adopts React Query's hydration pattern (prefetchQuery + dehydrate
+ HydrationBoundary) for grid and detail pages, replacing the
initialData-from-props approach. The favorite toggle now uses
optimistic updates on the listing cache entry itself.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jamesdoh0109

backend/market/views.py

@@ -189,7 +189,7 @@ def retrieve(self, request, *args, **kwargs):
             serializer_class = ListingSerializer
         else:
             serializer_class = ListingSerializerPublic
-        serializer = serializer_class(instance)
+        serializer = serializer_class(instance, context={"request": request})
         return Response(serializer.data)
 
 

frontend/app/items/[id]/page.tsx

@@ -1,9 +1,20 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
 import { getListingOrNotFound } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 
 export default async function ItemPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const item = await getListingOrNotFound(id);
 
-  return <ListingDetail listing={item} initialIsFavorited={item.is_favorited ?? false} />;
+  // seed the cache with the already-fetched listing (no additional fetch).
+  // We use setQueryData instead of prefetchQuery to preserve the notFound() throw above.
+  const queryClient = new QueryClient();
+  queryClient.setQueryData(queryKeys.listing(item.id), item);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ListingDetail listingId={item.id} />
+    </HydrationBoundary>
+  );
 }

frontend/app/page.tsx

@@ -1,16 +1,32 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getCurrentUser, getItems } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 import { PageHeader } from "@/components/common/PageHeader";
 import { ItemFilters } from "@/components/filters/ItemFilters";
 import { ListingsGrid } from "@/components/listings/ListingsGrid";
 
 export default async function ItemsPage() {
-  const [items, currentUser] = await Promise.all([getItems({ pageParam: 1 }), getCurrentUser()]);
+  const queryClient = new QueryClient();
+
+  const [, currentUser] = await Promise.all([
+    queryClient.fetchInfiniteQuery({
+      queryKey: queryKeys.listings("items"),
+      queryFn: () => getItems({ pageParam: 1 }),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) =>
+        lastPage.results.length > 0 ? allPages.length + 1 : undefined,
+      pages: 1,
+    }),
+    getCurrentUser(),
+  ]);
 
   return (
     <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-12 pt-6">
       <PageHeader title="Browse Items" description="Discover the latest items on sale at Penn" />
       <ItemFilters />
-      <ListingsGrid type="items" listings={items} currentUser={currentUser} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <ListingsGrid type="items" currentUser={currentUser} />
+      </HydrationBoundary>
     </div>
   );
 }

frontend/app/sublets/[id]/page.tsx

@@ -1,9 +1,20 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
 import { getListingOrNotFound } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 
 export default async function SubletPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const sublet = await getListingOrNotFound(id);
 
-  return <ListingDetail listing={sublet} initialIsFavorited={sublet.is_favorited ?? false} />;
+  // seed the cache with the already-fetched listing (no additional fetch).
+  // We use setQueryData instead of prefetchQuery to preserve the notFound() throw above.
+  const queryClient = new QueryClient();
+  queryClient.setQueryData(queryKeys.listing(sublet.id), sublet);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ListingDetail listingId={sublet.id} />
+    </HydrationBoundary>
+  );
 }

frontend/app/sublets/page.tsx

@@ -1,19 +1,32 @@
+import { QueryClient, dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getCurrentUser, getSublets } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 import { PageHeader } from "@/components/common/PageHeader";
 import { SubletFilters } from "@/components/filters/SubletFilters";
 import { ListingsGrid } from "@/components/listings/ListingsGrid";
 
 export default async function SubletsPage() {
-  const [sublets, currentUser] = await Promise.all([
-    getSublets({ pageParam: 1 }),
+  const queryClient = new QueryClient();
+
+  const [, currentUser] = await Promise.all([
+    queryClient.fetchInfiniteQuery({
+      queryKey: queryKeys.listings("sublets"),
+      queryFn: () => getSublets({ pageParam: 1 }),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) =>
+        lastPage.results.length > 0 ? allPages.length + 1 : undefined,
+      pages: 1,
+    }),
     getCurrentUser(),
   ]);
 
   return (
     <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-12 pt-6">
       <PageHeader title="Browse Sublets" description="Find your perfect housing solution at Penn" />
       <SubletFilters />
-      <ListingsGrid type="sublets" listings={sublets} currentUser={currentUser} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <ListingsGrid type="sublets" currentUser={currentUser} />
+      </HydrationBoundary>
     </div>
   );
 }

frontend/components/listings/ListingsGrid.tsx

@@ -5,22 +5,15 @@ import { Spinner } from "@/components/ui/spinner";
 import { ListingsCard } from "@/components/listings/ListingsCard";
 import { NoListingsFound } from "@/components/listings/NoListingsFound";
 import { useListings } from "@/hooks/useListings";
-import { Item, PaginatedResponse, Sublet, User } from "@/lib/types";
+import { ListingTypes, User } from "@/lib/types";
 
-type Props =
-  | {
-      type: "items";
-      listings: PaginatedResponse<Item>;
-      currentUser: User;
-    }
-  | {
-      type: "sublets";
-      listings: PaginatedResponse<Sublet>;
-      currentUser: User;
-    };
+type Props = {
+  type: ListingTypes;
+  currentUser: User;
+};
 
-export const ListingsGrid = ({ type, listings, currentUser }: Props) => {
-  const { data, error, isFetchingNextPage, hasNextPage, ref } = useListings({ type, listings });
+export const ListingsGrid = ({ type, currentUser }: Props) => {
+  const { data, error, isFetchingNextPage, hasNextPage, ref } = useListings({ type });
 
   const totalResults = data?.pages.reduce((acc, page) => acc + page.results.length, 0) || 0;
   const isEmpty = totalResults === 0;

frontend/components/listings/detail/ListingDetail.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { addToUsersFavorites, deleteFromUsersFavorites } from "@/lib/actions";
+import { addToUsersFavorites, deleteFromUsersFavorites, getListing } from "@/lib/actions";
+import { queryKeys } from "@/lib/queryKeys";
 import { Heart, Share } from "lucide-react";
 import { Item, Sublet } from "@/lib/types";
 import { ListingActions } from "@/components/listings/detail/ListingActions";
@@ -12,42 +13,40 @@ import { BackButton } from "@/components/listings/detail/BackButton";
 import { SubletMap } from "@/components/listings/detail/SubletMap";
 
 interface Props {
-  listing: Item | Sublet;
-  initialIsFavorited: boolean;
+  listingId: number;
 }
 
-export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
-  const listingType = listing.listing_type;
-  const priceLabel = listingType === "sublet" ? "/mo" : undefined;
-  const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
+export const ListingDetail = ({ listingId }: Props) => {
   const queryClient = useQueryClient();
-  const favoritesQuery = useQuery({
-    queryKey: ["favorite", listing.id],
-    queryFn: async () => initialIsFavorited,
-    initialData: initialIsFavorited,
-    staleTime: Infinity,
+  const queryKey = queryKeys.listing(listingId);
+
+  const { data: listing } = useQuery({
+    queryKey,
+    queryFn: () => getListing(String(listingId)),
   });
 
-  const isFavorited = favoritesQuery.data ?? false;
+  const isFavorited = listing?.is_favorited ?? false;
 
   const toggleFavoriteMutation = useMutation({
     meta: { suppressErrorToast: true }, // since it's noisy to show error toast on top of optimistic update
     mutationFn: async (shouldFavorite: boolean) => {
       if (shouldFavorite) {
-        await addToUsersFavorites(listing.id);
+        await addToUsersFavorites(listingId);
       } else {
-        await deleteFromUsersFavorites(listing.id);
+        await deleteFromUsersFavorites(listingId);
       }
     },
     onMutate: async (shouldFavorite: boolean) => {
-      await queryClient.cancelQueries({ queryKey: ["favorite", listing.id] });
-      const previous = queryClient.getQueryData<boolean>(["favorite", listing.id]);
-      queryClient.setQueryData(["favorite", listing.id], shouldFavorite);
+      await queryClient.cancelQueries({ queryKey });
+      const previous = queryClient.getQueryData<Item | Sublet>(queryKey);
+      if (previous) {
+        queryClient.setQueryData(queryKey, { ...previous, is_favorited: shouldFavorite });
+      }
       return { previous };
     },
     onError: (_error, _shouldFavorite, context) => {
-      if (context?.previous !== undefined) {
-        queryClient.setQueryData(["favorite", listing.id], context.previous);
+      if (context?.previous) {
+        queryClient.setQueryData(queryKey, context.previous);
       }
     },
   });
@@ -56,10 +55,14 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
     toggleFavoriteMutation.mutate(!isFavorited);
   };
 
-  const subletCoords =
-    listingType === "sublet" ? listing.additional_data : null;
-  const hasLocation =
-    subletCoords?.latitude != null && subletCoords?.longitude != null;
+  if (!listing) return null;
+
+  const listingType = listing.listing_type;
+  const priceLabel = listingType === "sublet" ? "/mo" : undefined;
+  const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
+
+  const subletCoords = listingType === "sublet" ? listing.additional_data : null;
+  const hasLocation = subletCoords?.latitude != null && subletCoords?.longitude != null;
 
   return (
     <div className="mx-auto flex w-full max-w-[96rem] flex-col p-8 px-4 sm:px-12">
@@ -94,13 +97,11 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
               <div>
                 <h2 className="text-lg font-semibold">{"Where you'll be living"}</h2>
                 <p className="text-sm text-gray-500">
-                  Approximate location shown. The exact location will be shared once you connect with the owner.
+                  Approximate location shown. The exact location will be shared once you connect
+                  with the owner.
                 </p>
-                </div>
-              <SubletMap
-                latitude={subletCoords.latitude!}
-                longitude={subletCoords.longitude!}
-              />
+              </div>
+              <SubletMap latitude={subletCoords.latitude!} longitude={subletCoords.longitude!} />
             </div>
           )}
           <ListingActions

frontend/components/listings/detail/SubletMap.tsx

@@ -8,9 +8,8 @@ interface Props {
 }
 
 const LazyMap = dynamic(
-  () =>
-    import("@/components/listings/detail/SubletMapContent").then((m) => m.SubletMapContent),
-  { ssr: false },
+  () => import("@/components/listings/detail/SubletMapContent").then((m) => m.SubletMapContent),
+  { ssr: false }
 );
 
 export const SubletMap = ({ latitude, longitude }: Props) => {

frontend/hooks/useListings.ts

@@ -2,7 +2,8 @@ import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { getItems, getSublets } from "@/lib/actions";
-import { ListingTypes, ListingDataMap, PaginatedResponse, Listing } from "@/lib/types";
+import { queryKeys } from "@/lib/queryKeys";
+import { ListingTypes, PaginatedResponse, Listing } from "@/lib/types";
 import { useFilters } from "@/providers/FiltersProvider";
 
 const LISTING_FETCHERS = {
@@ -12,30 +13,22 @@ const LISTING_FETCHERS = {
 
 export type UseListingsParams<T extends ListingTypes> = {
   type: T;
-  listings: PaginatedResponse<ListingDataMap[T]>;
 };
 
-export function useListings<T extends ListingTypes>({ type, listings }: UseListingsParams<T>) {
+export function useListings<T extends ListingTypes>({ type }: UseListingsParams<T>) {
   const { ref, inView } = useInView();
   const { debouncedFilters } = useFilters();
 
   const filters = debouncedFilters[type];
-  const queryKey = [type, "list", filters];
 
   const queryFn = ({ pageParam = 1 }: { pageParam: unknown }) =>
     LISTING_FETCHERS[type]({ pageParam, ...filters });
 
-  const hasActiveFilters = Object.values(filters).some((value) => {
-    if (typeof value === "string") return value.trim() !== "";
-    return value !== undefined;
-  });
-
   const { data, error, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery<
     PaginatedResponse<Listing>
   >({
-    queryKey,
+    queryKey: queryKeys.listings(type, filters),
     queryFn,
-    initialData: hasActiveFilters ? undefined : { pages: [listings], pageParams: [1] },
     placeholderData: (previousData) => previousData,
     initialPageParam: 1,
     getNextPageParam(lastPage, allPages) {

frontend/lib/actions.ts

@@ -182,7 +182,7 @@ export async function getSublets({
 // ------------------------------------------------------------
 // single listing (items or sublets)
 // ------------------------------------------------------------
-async function getListing(id: string) {
+export async function getListing(id: string) {
   return await serverFetch<Item | Sublet>(`/market/listings/${id}/`);
 }