add deferred data loading to tanstack router/start examples

Author: KevinVandy

README.md

@@ -58,7 +58,7 @@ This repository explores data fetching across multiple meta-frameworks and libra
 - **Astro** - Multi-framework static site generator with server rendering
 - **TanStack Router** - Type-safe routing with built-in data loading
 - **TanStack Start** - Full-stack React framework built on TanStack Router
-- **SvelteKit** - *bonus* Full-stack Svelte framework for comparison
+- **SvelteKit** - _bonus_ Full-stack Svelte framework for comparison
 
 ## Getting Started
 

apps/1-csr/1-1-vite-react-router-componentdidmount/README.md

@@ -14,6 +14,7 @@ This example demonstrates legacy React data fetching patterns using class compon
 ## Code Examples
 
 ### Basic Data Fetching in componentDidMount
+
 ```tsx
 // HomePage.tsx:53-55
 componentDidMount() {
@@ -23,7 +24,7 @@ componentDidMount() {
 // HomePage.tsx:32-51
 fetchPosts = async () => {
   const { posts } = this.state;
-  
+
   if (!posts.length) {
     this.setState({ isLoadingPosts: true });
   }
@@ -44,6 +45,7 @@ fetchPosts = async () => {
 ```
 
 ### Refetching on Route Parameter Changes
+
 ```tsx
 // PostPage.tsx:83-89
 componentDidUpdate(prevProps: PostPageProps) {
@@ -56,6 +58,7 @@ componentDidUpdate(prevProps: PostPageProps) {
 ```
 
 ### Manual State Management Pattern
+
 ```tsx
 // PostPage.tsx:17-42
 interface HomePageState {
@@ -71,4 +74,4 @@ state: HomePageState = {
   isErrorLoadingPosts: false,
   isFetchingPosts: false,
 };
-```
+```

apps/1-csr/1-2-vite-react-router-useeffect/README.md

@@ -16,6 +16,7 @@ This example demonstrates the native React hooks approach to data fetching using
 ## Code Examples
 
 ### Basic Data Fetching with useEffect
+
 ```tsx
 // HomePage.tsx:45-47
 useEffect(() => {
@@ -44,6 +45,7 @@ const fetchPosts = async () => {
 ```
 
 ### useState for State Management
+
 ```tsx
 // HomePage.tsx:18-22
 const [posts, setPosts] = useState<IPost[]>([]);
@@ -53,6 +55,7 @@ const [isFetchingPosts, setIsFetchingPosts] = useState(false);
 ```
 
 ### Using useParams for Route Parameters
+
 ```tsx
 // PostPage.tsx:23
 const { id: postId } = useParams();
@@ -66,4 +69,5 @@ useEffect(() => {
 ```
 
 ### Problem: Missing Dependency Arrays
-Notice this example has a potential issue - the useEffect calls functions that depend on `postId` but doesn't include dependencies, which could cause stale closure problems when route parameters change.
+
+Notice this example has a potential issue - the useEffect calls functions that depend on `postId` but doesn't include dependencies, which could cause stale closure problems when route parameters change.

apps/1-csr/1-3-vite-react-router-react-query/README.md

@@ -15,6 +15,7 @@ This example demonstrates professional-grade data fetching using TanStack Query
 ## Code Examples
 
 ### Basic Query Usage
+
 ```tsx
 // HomePage.tsx:19-32
 const {
@@ -33,6 +34,7 @@ const {
 ```
 
 ### Dependent Queries with Enabled Option
+
 ```tsx
 // PostPage.tsx:41-54
 const {
@@ -50,6 +52,7 @@ const {
 ```
 
 ### Background Refetching
+
 ```tsx
 // PostPage.tsx:57-72
 const {
@@ -61,14 +64,17 @@ const {
 } = useQuery({
   queryKey: ["posts", postId, "comments"],
   queryFn: async () => {
-    const response = await fetch(`http://localhost:3300/posts/${postId}/comments`);
+    const response = await fetch(
+      `http://localhost:3300/posts/${postId}/comments`,
+    );
     return response.json() as Promise<IComment[]>;
   },
   refetchInterval: 10000, // Auto-refetch every 10 seconds
 });
 ```
 
 ### Mutations with Optimistic Updates
+
 ```tsx
 // PostPage.tsx:108-160
 const { mutate: postComment, isPending: isPostingComment } = useMutation({
@@ -82,20 +88,30 @@ const { mutate: postComment, isPending: isPostingComment } = useMutation({
   },
   // Optimistic update - UI changes immediately
   onMutate: async (newComment) => {
-    await queryClient.cancelQueries({ queryKey: ["posts", postId, "comments"] });
-    
-    const previousComments = queryClient.getQueryData(["posts", postId, "comments"]);
-    
+    await queryClient.cancelQueries({
+      queryKey: ["posts", postId, "comments"],
+    });
+
+    const previousComments = queryClient.getQueryData([
+      "posts",
+      postId,
+      "comments",
+    ]);
+
     // Update UI optimistically
-    queryClient.setQueryData(["posts", postId, "comments"], 
-      (oldComments: any) => [...oldComments, newComment]
+    queryClient.setQueryData(
+      ["posts", postId, "comments"],
+      (oldComments: any) => [...oldComments, newComment],
     );
-    
+
     return { previousComments };
   },
   // Rollback on error
   onError: (err, _newComment, context) => {
-    queryClient.setQueryData(["posts", postId, "comments"], context?.previousComments);
+    queryClient.setQueryData(
+      ["posts", postId, "comments"],
+      context?.previousComments,
+    );
   },
   // Refresh data after success/error
   onSettled: () => {
@@ -105,11 +121,12 @@ const { mutate: postComment, isPending: isPostingComment } = useMutation({
 ```
 
 ### Query Invalidation for Cache Management
+
 ```tsx
 // PostPage.tsx:98-102
 onSettled: () => {
   queryClient.invalidateQueries({
     queryKey: ["posts", postId, "comments"],
   }); // Refresh comments after deletion
 },
-```
+```

apps/1-csr/1-4-vite-react-router-react-query-hooks/README.md

@@ -15,6 +15,7 @@ This example demonstrates how to organize React Query code into reusable custom
 ## Code Examples
 
 ### Custom Hook Structure
+
 ```tsx
 // hooks/useGetPosts.ts:7-22
 export const getPostsQueryKey = () => [ENDPOINT];
@@ -40,6 +41,7 @@ export function prefetchPosts(queryClient: QueryClient) {
 ```
 
 ### Using Custom Hooks in Components
+
 ```tsx
 // pages/HomePage.tsx:48-49
 function HomePagePosts() {
@@ -49,6 +51,7 @@ function HomePagePosts() {
 ```
 
 ### Query Key Management
+
 ```tsx
 // hooks/useGetPostComments.ts:7
 export const getPostCommentsQueryKey = (postId: string) => [ENDPOINT(postId)];
@@ -63,14 +66,12 @@ onSettled: () => {
 ```
 
 ### Suspense-Based Loading with Error Boundaries
+
 ```tsx
 // pages/HomePage.tsx:14-25
 <QueryErrorResetBoundary>
   {({ reset }) => (
-    <ErrorBoundary
-      fallbackRender={() => <HomePageError />}
-      onReset={reset}
-    >
+    <ErrorBoundary fallbackRender={() => <HomePageError />} onReset={reset}>
       <Suspense fallback={<HomePageSkeleton />}>
         <HomePagePosts />
       </Suspense>
@@ -80,6 +81,7 @@ onSettled: () => {
 ```
 
 ### Dependent Queries with Enabled Option
+
 ```tsx
 // hooks/useGetUser.ts:19-24
 export function useGetUser(userId?: number) {
@@ -99,4 +101,4 @@ While this custom hooks pattern was popular, the newer `queryOptions` pattern (s
 - **Easier composition and reuse**
 - **Official recommendation from TanStack Query team**
 
-This example remains valuable for understanding how React Query code organization evolved and may still be found in existing codebases.
+This example remains valuable for understanding how React Query code organization evolved and may still be found in existing codebases.

apps/1-csr/1-5-vite-react-router-react-query-query-options/README.md

@@ -15,6 +15,7 @@ This example demonstrates the modern, recommended approach to organizing React Q
 ## Code Examples
 
 ### Basic queryOptions Definition
+
 ```tsx
 // queries/posts.ts:7-13
 export const postsQueryOptions = queryOptions({
@@ -27,6 +28,7 @@ export const postsQueryOptions = queryOptions({
 ```
 
 ### Parameterized queryOptions
+
 ```tsx
 // queries/posts.ts:16-23
 export const postQueryOptions = (postId: string) =>
@@ -40,6 +42,7 @@ export const postQueryOptions = (postId: string) =>
 ```
 
 ### Using queryOptions with Different Hooks
+
 ```tsx
 // pages/HomePage.tsx:50 - With useSuspenseQuery
 const { data: posts } = useSuspenseQuery(postsQueryOptions);
@@ -49,15 +52,21 @@ const { data: post, isLoading, isError } = useQuery(postQueryOptions(postId!));
 ```
 
 ### Extending queryOptions for Dependent Queries
+
 ```tsx
 // pages/PostPage.tsx:42-45
-const { data: user, isLoading: isLoadingUser, isError: isErrorLoadingUser } = useQuery({
+const {
+  data: user,
+  isLoading: isLoadingUser,
+  isError: isErrorLoadingUser,
+} = useQuery({
   ...userQueryOptions(post?.userId!), // Spread the base options
   enabled: !!post?.userId, // Add additional configuration
 });
 ```
 
 ### Query Key Access for Cache Management
+
 ```tsx
 // pages/PostPage.tsx:81-84
 onSettled: () => {
@@ -68,6 +77,7 @@ onSettled: () => {
 ```
 
 ### Complex Query Options with Additional Configuration
+
 ```tsx
 // queries/comments.ts:7-15
 export const postCommentsQueryOptions = (postId: string) =>
@@ -84,23 +94,27 @@ export const postCommentsQueryOptions = (postId: string) =>
 ## Advantages Over Custom Hooks Pattern
 
 **1. Better TypeScript Support**
+
 - Improved type inference
 - Consistent typing across different hooks
 - Better intellisense and autocomplete
 
 **2. More Flexible**
+
 - Works with any React Query hook (`useQuery`, `useSuspenseQuery`, `useInfiniteQuery`, etc.)
 - Easy to extend with additional options
 - Framework-agnostic definitions
 
 **3. Official Recommendation**
+
 - Current best practice from TanStack team
 - Future-proof approach
 - Better documentation and community support
 
 **4. Cleaner Code**
+
 - Less boilerplate than custom hooks
 - More declarative approach
 - Easier to test and mock
 
-This is the current recommended pattern for organizing React Query code in modern applications.
+This is the current recommended pattern for organizing React Query code in modern applications.