rename to clientLoader

Author: bradwestfall

app-react-router-spa/COURSES/core/06-data-fetching/lecture/App.tsx

@@ -12,7 +12,7 @@ import { VacationsSubLayout } from '~/VacationsSubLayout'
 import { AccountSubLayout } from '~/AccountSubLayout'
 
 // Pages
-import { BrowseVacationsPage, loader as browseVacationsLoader } from './BrowseVacationsPage'
+import { BrowseVacationsPage, clientLoader as browseVacationsLoader } from './BrowseVacationsPage'
 import { VacationDetailsPage } from './VacationDetailsPage'
 import { LoginPage } from '~/LoginPage'
 import { ErrorPage } from '~/ErrorPage'

app-react-router-spa/COURSES/core/06-data-fetching/lecture/BrowseVacationsPage.tsx

@@ -4,7 +4,7 @@ import { api } from '~/utils/api'
 import { BrowseVacationsItem } from '~/BrowseVacationsItem'
 import { queryClient } from '~/utils/queryClient'
 
-export async function loader() {
+export async function clientLoader() {
   const vacations = await queryClient.ensureQueryData({
     queryKey: ['vacations'],
     queryFn: () => api.vacations.getAll(),
@@ -14,7 +14,8 @@ export async function loader() {
 }
 
 export function BrowseVacationsPage() {
-  const vacations = useLoaderData() as Awaited<ReturnType<typeof loader>>
+  const vacations = useLoaderData() as Awaited<ReturnType<typeof clientLoader>>
+
   return (
     <div>
       {!vacations && <div>Loading...</div>}

app-react-router-spa/COURSES/core/06-data-fetching/lecture/VacationDetailsPage.tsx

@@ -17,7 +17,7 @@ import type { Vacation } from '~/utils/types'
 //   staleTime: 1000 * 30,
 // })
 
-// export async function loader({ params }: LoaderFunctionArgs) {
+// export async function clientLoader({ params }: LoaderFunctionArgs) {
 //   return api.vacations.getVacation(vacationId)
 // }
 

app-react-router-spa/COURSES/core/06-data-fetching/practice/BrowseVacationsPage.final.tsx

@@ -6,7 +6,7 @@ import { api } from '~/utils/api'
 import type { Vacation } from '~/utils/types'
 
 // 2: Finished with loader
-export async function loader() {
+export async function clientLoader() {
   return api.vacations.getAll()
 }
 

app-react-router-spa/COURSES/core/06-data-fetching/practice/BrowseVacationsPage.tsx

@@ -9,7 +9,7 @@ import type { Vacation } from '~/utils/types'
 // 2. Then refactor the code that was fetching within the component to fetch
 //    from this loader instead. Note that React Router is already importing this
 //    loading and attaching it to the correct route
-export async function loader() {
+export async function clientLoader() {
   return []
 }
 

app-react-router-spa/src/BrowseVacationsPage.tsx

@@ -4,7 +4,7 @@ import { BrowseVacationsItem } from '~/BrowseVacationsItem'
 import { queryClient } from './utils/queryClient'
 import { useLoaderData } from 'react-router'
 
-export async function loader() {
+export async function clientLoader() {
   const vacations = await queryClient.fetchQuery({
     queryKey: ['vacations'],
     queryFn: () => api.vacations.getAll(),
@@ -13,7 +13,7 @@ export async function loader() {
   return vacations
 }
 
-type LoaderData = Awaited<ReturnType<typeof loader>>
+type LoaderData = Awaited<ReturnType<typeof clientLoader>>
 
 export function BrowseVacationsPage() {
   const vacations = useLoaderData() as LoaderData

app-react-router-spa/src/VacationDetailsPage.tsx

@@ -7,7 +7,7 @@ import { FavoriteVacationButton } from '~/FavoriteVacationButton'
 import { LoaderFunctionArgs, useLoaderData } from 'react-router'
 import { queryClient } from '~/utils/queryClient'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const id = parseInt(params.vacationId!)
 
   const vacation = await queryClient.fetchQuery({
@@ -18,7 +18,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return vacation
 }
 
-type LoaderData = Awaited<ReturnType<typeof loader>>
+type LoaderData = Awaited<ReturnType<typeof clientLoader>>
 
 export function VacationDetailsPage() {
   const vacation = useLoaderData() as LoaderData

app-react-router-spa/src/router.tsx

@@ -6,8 +6,8 @@ import { VacationsSubLayout } from '~/VacationsSubLayout'
 import { AccountSubLayout } from '~/AccountSubLayout'
 
 // Pages
-import { BrowseVacationsPage, loader as browseVacationsLoader } from '~/BrowseVacationsPage'
-import { VacationDetailsPage, loader as vacationDetailsLoader } from '~/VacationDetailsPage'
+import { BrowseVacationsPage, clientLoader as browseVacationsLoader } from '~/BrowseVacationsPage'
+import { VacationDetailsPage, clientLoader as vacationDetailsLoader } from '~/VacationDetailsPage'
 import { LoginPage } from '~/LoginPage'
 import { ErrorPage } from '~/ErrorPage'
 import { NotFoundPage } from '~/NotFoundPage'