React Query: Production-Grade Patterns

// hooks/useToggleLike.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Post } from '@/types';

export const useToggleLike = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (postId: string) => api.post(`/posts/${postId}/like`),

    // 1. ⚡ ON MUTATE: Run before the request is sent
    onMutate: async (postId) => {
      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
      await queryClient.cancelQueries({ queryKey: ['posts'] });

      // Snapshot the previous value (for rollback if needed)
      const previousPosts = queryClient.getQueryData<Post[]>(['posts']);

      // Optimistically update to the new value
      queryClient.setQueryData<Post[]>(['posts'], (old) => {
        return old?.map(post => 
          post.id === postId 
            ? { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1 }
            : post
        );
      });

      // Return a context object with the snapshotted value
      return { previousPosts };
    },

    // 2. ❌ ON ERROR: If server fails, roll back
    onError: (err, newTodo, context) => {
      queryClient.setQueryData(['posts'], context?.previousPosts);
      toast.error("Could not update like status");
    },

    // 3. ✅ ON SETTLED: Always refetch after error or success to ensure sync
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    },
  });
};

// Component Usage
const LikeButton = ({ postId }: { postId: string }) => {
  const { mutate: toggleLike, isPending } = useToggleLike();

  return (
    <button 
      onClick={() => toggleLike(postId)}
      disabled={isPending}
      className="flex items-center gap-2"
    >
      <HeartIcon filled={isLiked} />
      <span>{likes}</span>
    </button>
  );
};

// hooks/useProductSearch.ts
import { useQuery } from '@tanstack/react-query';
import { ProductResponse } from '@/types';

// Standard Senior Pattern: Pass a simplified "filters" object
export const useProductSearch = ({ page, search }: { page: number; search: string }) => {
  return useQuery({
    // 🔑 Key includes all dependencies. If 'search' changes, it refetches.
    queryKey: ['products', page, search], 
    
    // ⚡ Query Function receives the 'signal' for cancellation
    queryFn: async ({ signal }) => {
      const params = new URLSearchParams({ 
        page: page.toString(), 
        q: search 
      });
      
      // Pass the signal to fetch/axios. 
      // If user types again, browser KILLS this request automatically.
      const res = await fetch(`/api/products?${params}`, { signal });
      if (!res.ok) throw new Error('Network error');
      return res.json() as Promise<ProductResponse>;
    },

    // 🛡️ UX: Keep showing Page 1 data while Page 2 is loading.
    // Prevents the "Loading Spinner Flash" between pages.
    placeholderData: (previousData) => previousData, 
    
    // 🧠 Cache: Keep unused pages in memory for 5 mins so "Back" button is instant
    staleTime: 1000 * 60 * 5, 
  });
};

// Component Usage
const ProductTable = () => {
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  
  const { data, isLoading, isFetching } = useProductSearch({ page, search });

  return (
    <div>
      <input 
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search products..."
      />
      
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <>
          <table>
            {data?.products.map(product => (
              <tr key={product.id}>
                <td>{product.name}</td>
                <td>{product.price}</td>
              </tr>
            ))}
          </table>
          
          <div>
            <button onClick={() => setPage(p => p - 1)} disabled={page === 1}>
              Previous
            </button>
            <span>Page {page}</span>
            <button onClick={() => setPage(p => p + 1)}>
              Next
            </button>
          </div>
        </>
      )}
    </div>
  );
};

// hooks/useInfiniteFeed.ts
import { useInfiniteQuery } from '@tanstack/react-query';

export const useInfiniteFeed = () => {
  return useInfiniteQuery({
    queryKey: ['feed'],
    queryFn: async ({ pageParam = 1 }) => {
      const res = await fetch(`/api/feed?page=${pageParam}`);
      return res.json();
    },
    
    // Logic to find the next cursor
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.hasMore ? lastPage.nextPage : undefined;
    },

    // ✨ SENIOR TRICK: The 'select' option
    // Transform the data HERE, not in the component.
    // We flatten the "pages" array into a single "items" array.
    select: (data) => ({
      pages: data.pages,
      pageParams: data.pageParams,
      // Create a flat array for easy mapping in the UI
      items: data.pages.flatMap((page) => page.results)
    }),
  });
};

// Component Usage (Clean UI)
const Feed = () => {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteFeed();
  
  // No need to map over pages in the UI anymore!
  // We can just map over 'data.items' because we transformed it above.
  return (
    <div>
      {data?.items.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
      
      {hasNextPage && (
        <button 
          onClick={() => fetchNextPage()}
          disabled={isFetchingNextPage}
        >
          {isFetchingNextPage ? 'Loading more...' : 'Load More'}
        </button>
      )}
    </div>
  );
};

// Alternative: Using Intersection Observer for auto-load
const FeedWithAutoLoad = () => {
  const { data, fetchNextPage, hasNextPage } = useInfiniteFeed();
  const loadMoreRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!loadMoreRef.current || !hasNextPage) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          fetchNextPage();
        }
      },
      { threshold: 0.1 }
    );

    observer.observe(loadMoreRef.current);
    return () => observer.disconnect();
  }, [hasNextPage, fetchNextPage]);

  return (
    <div>
      {data?.items.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
      <div ref={loadMoreRef} className="h-10" />
    </div>
  );
};