Remove the config loader hooks that are unnecessary

app/projects/query.tsx

@@ -1,6 +1,3 @@
-import { useRouteLoaderData } from '@remix-run/react'
-import type { QueryConfigLoader } from '~/routes/query.$version.docs'
-
 export const gradientText =
   'inline-block text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-500'
 
@@ -38,15 +35,3 @@ export function getBranch(argVersion?: string) {
 }
 
 export type Framework = 'angular' | 'react' | 'svelte' | 'vue' | 'solid'
-
-export const useQueryDocsConfig = () => {
-  const queryConfigLoaderData = useRouteLoaderData<QueryConfigLoader>(
-    'routes/query.$version.docs'
-  )
-
-  if (!queryConfigLoaderData?.tanstackDocsConfig) {
-    throw new Error('Config could not be read for tanstack/query!')
-  }
-
-  return queryConfigLoaderData
-}

app/projects/ranger.tsx

@@ -1,21 +1,6 @@
-import { useRouteLoaderData } from '@remix-run/react'
-import type { RangerConfigV1Loader } from '~/routes/ranger.v1.docs'
-
 export const repo = 'tanstack/ranger'
 
 export const v1branch = 'main'
 
 export const gradientText =
   'inline-block text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500'
-
-export const useRangerV1Config = () => {
-  const rangerConfigLoaderData = useRouteLoaderData<RangerConfigV1Loader>(
-    'routes/ranger.v1.docs'
-  )
-
-  if (!rangerConfigLoaderData?.tanstackDocsConfig) {
-    throw new Error(`Config could not be read for ${repo}!`)
-  }
-
-  return rangerConfigLoaderData.tanstackDocsConfig
-}

app/routes/query.$version.docs.$framework.tsx

@@ -1,17 +1,23 @@
 import * as React from 'react'
 import { FaDiscord, FaGithub } from 'react-icons/fa'
-import type { MetaFunction } from '@remix-run/node'
-import { Link, useMatches, useNavigate, useParams } from '@remix-run/react'
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
+import {
+  Link,
+  json,
+  useLoaderData,
+  useMatches,
+  useNavigate,
+} from '@remix-run/react'
 import { seo } from '~/utils/seo'
 import type { DocsConfig } from '~/components/Docs'
 import { Docs } from '~/components/Docs'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
 import {
   availableVersions,
+  getBranch,
   gradientText,
   latestVersion,
   repo,
-  useQueryDocsConfig,
 } from '~/projects/query'
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
@@ -20,7 +26,21 @@ import svelteLogo from '~/images/svelte-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
 import type { AvailableOptions } from '~/components/Select'
 import { generatePath } from '~/utils/utils'
-import type { MenuItem } from '~/utils/config'
+import { getTanstackDocsConfig, type MenuItem } from '~/utils/config'
+
+export const loader = async (context: LoaderFunctionArgs) => {
+  const branch = getBranch(context.params.version)
+  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
+  const { version, framework } = context.params
+
+  return json({
+    tanstackDocsConfig,
+    framework,
+    version,
+  })
+}
+
+export type QueryConfigLoader = typeof loader
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -81,8 +101,8 @@ export default function RouteFrameworkParam() {
   const matches = useMatches()
   const match = matches[matches.length - 1]
   const navigate = useNavigate()
-  const { version, framework } = useParams()
-  const { tanstackDocsConfig } = useQueryDocsConfig()
+  const { tanstackDocsConfig, version, framework } =
+    useLoaderData<typeof loader>()
 
   let config = tanstackDocsConfig
 

app/routes/query.$version.docs.tsx

@@ -1,21 +1,4 @@
-import { type LoaderFunctionArgs, json } from '@remix-run/node'
 import { Outlet } from '@remix-run/react'
-import { getBranch, repo } from '~/projects/query'
-import { getTanstackDocsConfig } from '~/utils/config'
-
-export const loader = async (context: LoaderFunctionArgs) => {
-  const branch = getBranch(context.params.version)
-  const tanstackDocsConfig = await getTanstackDocsConfig(repo, branch)
-  const { version, framework } = context.params
-
-  return json({
-    tanstackDocsConfig,
-    framework,
-    version,
-  })
-}
-
-export type QueryConfigLoader = typeof loader
 
 export default function RouteDocsParam() {
   return <Outlet />

app/routes/ranger.v1.docs.tsx

@@ -1,15 +1,9 @@
 import * as React from 'react'
 import { FaDiscord, FaGithub } from 'react-icons/fa'
-import { Link, json } from '@remix-run/react'
+import { Link, json, useLoaderData } from '@remix-run/react'
 import type { MetaFunction } from '@remix-run/node'
-import {
-  gradientText,
-  repo,
-  useRangerV1Config,
-  v1branch,
-} from '~/projects/ranger'
+import { gradientText, repo, v1branch } from '~/projects/ranger'
 import { seo } from '~/utils/seo'
-import type { DocsConfig } from '~/components/Docs'
 import { Docs } from '~/components/Docs'
 import { getTanstackDocsConfig } from '~/utils/config'
 
@@ -21,8 +15,6 @@ export const loader = async () => {
   })
 }
 
-export type RangerConfigV1Loader = typeof loader
-
 const logo = (
   <>
     <Link to="/" className="font-light">
@@ -69,15 +61,14 @@ export const meta: MetaFunction = () => {
 }
 
 export default function DocsRoute() {
-  let config = useRangerV1Config()
+  const { tanstackDocsConfig } = useLoaderData<typeof loader>()
 
-  config = React.useMemo(
-    () =>
-      ({
-        ...config,
-        menu: [localMenu, ...config.menu],
-      } as DocsConfig),
-    [config]
+  const config = React.useMemo(
+    () => ({
+      ...tanstackDocsConfig,
+      menu: [localMenu, ...tanstackDocsConfig.menu],
+    }),
+    [tanstackDocsConfig]
   )
 
   return (