stormy-gold

Loader doesn't get router context

I'm trying to use a TanStack Query queryClient in my loader that I pass through context, but the loader is not detecting the context. I'm wondering if I'm doing anything wrong.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

// Set up a Router instance
const router = createRouter({
  routeTree,
  context: {
    queryClient: queryClient,
  },
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
})

// Register things for typesafety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  )
}

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

// Set up a Router instance
const router = createRouter({
  routeTree,
  context: {
    queryClient: queryClient,
  },
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
})

// Register things for typesafety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  )
}

import * as React from 'react'
import { Await, createFileRoute, defer } from '@tanstack/react-router'
import { queryOptions } from '@tanstack/react-query'

const aboutQueryOptions = queryOptions({
  queryKey: ['about'],
  queryFn: () =>
    new Promise<string>((r) =>
      setTimeout(() => {
        r('foo')
      }, 5000)
    ),
})

export const Route = createFileRoute('/about')({
  loader: ({ context: { queryClient } }) => {
    const ready = "I'm ready"
    const slow = queryClient.ensureQueryData(aboutQueryOptions)
    return {
      readyData: ready,
    }
  },
  component: AboutComponent,
})

function AboutComponent() {
  const { readyData } = Route.useLoaderData()
  return (
    <div className='p-2' id='about'>
      <h3>About</h3>
      <p>{readyData}</p>
    </div>
  )
}

import * as React from 'react'
import { Await, createFileRoute, defer } from '@tanstack/react-router'
import { queryOptions } from '@tanstack/react-query'

const aboutQueryOptions = queryOptions({
  queryKey: ['about'],
  queryFn: () =>
    new Promise<string>((r) =>
      setTimeout(() => {
        r('foo')
      }, 5000)
    ),
})

export const Route = createFileRoute('/about')({
  loader: ({ context: { queryClient } }) => {
    const ready = "I'm ready"
    const slow = queryClient.ensureQueryData(aboutQueryOptions)
    return {
      readyData: ready,
    }
  },
  component: AboutComponent,
})

function AboutComponent() {
  const { readyData } = Route.useLoaderData()
  return (
    <div className='p-2' id='about'>
      <h3>About</h3>
      <p>{readyData}</p>
    </div>
  )
}