Repository: TanStack/router
Pull request #2007 (2024-07-22 13:29:09)

fix(router-with-query): context type too narrow
type currently expects exact match on context type:

![CleanShot 2024-07-22 at 15 29 35@2x](https://github.com/user-attachments/assets/5e0c78de-9648-41dd-92dc-9e4a933ffb78)




Patch:
diff --git a/examples/react/start-basic-react-query/app/router.tsx b/examples/react/start-basic-react-query/app/router.tsx
index 24604116c..ee35b01cb 100644
--- a/examples/react/start-basic-react-query/app/router.tsx
+++ b/examples/react/start-basic-react-query/app/router.tsx
@@ -15,6 +15,7 @@ export function createRouter() {
   return routerWithQueryClient(
     createTanStackRouter({
       routeTree,
+      context: { queryClient },
       defaultPreload: 'intent',
       defaultErrorComponent: DefaultCatchBoundary,
       defaultNotFoundComponent: () => <NotFound />,
diff --git a/packages/react-router-with-query/src/index.tsx b/packages/react-router-with-query/src/index.tsx
index 50ea13bcb..3af367306 100644
--- a/packages/react-router-with-query/src/index.tsx
+++ b/packages/react-router-with-query/src/index.tsx
@@ -1,22 +1,23 @@
+import { Fragment } from 'react'
 import {
   QueryClientProvider,
   dehydrate,
   hashKey,
   hydrate,
 } from '@tanstack/react-query'
-import { type AnyRouterWithContext } from '@tanstack/react-router'
-import { Fragment } from 'react'
+import type { AnyRouter } from '@tanstack/react-router'
 import type {
   QueryClient,
   QueryObserverResult,
   UseQueryOptions,
 } from '@tanstack/react-query'
 
-export function routerWithQueryClient<
-  T extends AnyRouterWithContext<{
-    queryClient: QueryClient
-  }>,
->(router: T, queryClient: QueryClient): T {
+export function routerWithQueryClient<TRouter extends AnyRouter>(
+  router: TRouter['options']['context'] extends { queryClient: QueryClient }
+    ? TRouter
+    : never,
+  queryClient: QueryClient,
+): TRouter {
   const seenQueryKeys = new Set<string>()
   const streamedQueryKeys = new Set<string>()
 


Test patch:
diff --git a/packages/react-router-with-query/tests/index.test-d.ts b/packages/react-router-with-query/tests/index.test-d.ts
new file mode 100644
index 000000000..77a004ce0
--- /dev/null
+++ b/packages/react-router-with-query/tests/index.test-d.ts
@@ -0,0 +1,55 @@
+import { QueryClient } from '@tanstack/react-query'
+import {
+  createRootRouteWithContext,
+  createRouter,
+} from '@tanstack/react-router'
+
+import { expectTypeOf, test } from 'vitest'
+
+import { routerWithQueryClient } from '../src'
+
+test('basic { queryClient } context', () => {
+  const root = createRootRouteWithContext<{
+    queryClient: QueryClient
+  }>()({})
+
+  const queryClient = new QueryClient()
+  const router = createRouter({
+    context: { queryClient },
+    routeTree: root,
+  })
+
+  const routerWithQuery = routerWithQueryClient(router, queryClient)
+  expectTypeOf(routerWithQuery).toEqualTypeOf(router)
+})
+
+test('no context fails', () => {
+  const root = createRootRouteWithContext()({})
+
+  const queryClient = new QueryClient()
+  const router = createRouter({
+    routeTree: root,
+  })
+
+  routerWithQueryClient(
+    // @ts-expect-error - QueryClient must be in context type
+    router,
+    queryClient,
+  )
+})
+
+test('allows additional props on context', () => {
+  const root = createRootRouteWithContext<{
+    queryClient: QueryClient
+    extra: string
+  }>()({})
+
+  const queryClient = new QueryClient()
+  const router = createRouter({
+    context: { queryClient, extra: 'extra' },
+    routeTree: root,
+  })
+
+  const routerWithQuery = routerWithQueryClient(router, queryClient)
+  expectTypeOf(routerWithQuery).toEqualTypeOf(router)
+})
diff --git a/packages/react-router-with-query/tests/index.test.tsx b/packages/react-router-with-query/tests/index.test.tsx
deleted file mode 100644
index 38cae5d8d..000000000
--- a/packages/react-router-with-query/tests/index.test.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { expect, test } from 'vitest'
-
-test('it has a test', async () => {
-  expect(true).toBe(true)
-})