`npm create @tanstack/start@latest`, when set up with Query also includes Provider, but it is not used.

[Ashvith10]

Which project does this relate to?

Create Tanstack App

Describe the bug

When setting up npm create @tanstack/start@latest, it also creates the folder src/integrations/tanstack-query with two files inside:

• root-provider.tsx
• devtools.tsx

Inside root-provider.tsx, there is a Provider function (see both tRPC and non-tRPC snippet below)

https://github.com/TanStack/create-tsrouter-app/blob/6110e61344d6fc002dbf371c89e39ce8f679789c/frameworks/react-cra/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs#L46-L58

https://github.com/TanStack/create-tsrouter-app/blob/6110e61344d6fc002dbf371c89e39ce8f679789c/frameworks/react-cra/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs#L69-L79

They are not used anywhere in the template, and from the page TanStack Query Integration:

By default, the integration wraps your router with a QueryClientProvider. If you already provide your own provider, pass wrapQueryClient: false and keep your custom wrapper.

The code in the template is unused, so it may be removed.

Your Example Website or App

https://tanstack.com/start/v0/docs/framework/react/quick-start

Steps to Reproduce the Bug or Issue

1. Create a basic app with npm create @tanstack/start@latest my-app -- --add-ons tanstack-query
2. View the contents of src/integrations/tanstack-query/root-provider.tsx with cat:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

export function getContext() {
  const queryClient = new QueryClient()
  return {
    queryClient,
  }
}

export function Provider({
  children,
  queryClient,
}: {
  children: React.ReactNode
  queryClient: QueryClient
}) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  )
}

3. Look for files where Provider is mentioned with grep:

$ grep -nr "\bProvider" --exclude-dir=node_modules
src/integrations/tanstack-query/root-provider.tsx:10:export function Provider({

As we can see, excluding the file where it was defined, it is not used anywhere else.

Expected behavior

As a user, I expect unused code snippets to not be part of our template. However, in our case, there is a unused code that returns a QueryClientProvider, which is not used anywhere, and which won't be needed, since Router also has Query integration.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Firefox
• Version: 146.0-2

Additional context

No response

[anandxs]

It may be an oversight to not use the Provider function. However, I don't think the function in itself is unnecessary. Since you are opting to use tanstack-query you would require to wrap your app within the QueryProvider.

[Ashvith10]

@anandxs Wrapping it is optional. Please read TanStack Query Integration/Setup:

By default, the integration wraps your router with a QueryClientProvider. If you already provide your own provider, pass wrapQueryClient: false and keep your custom wrapper.

The router already wraps a QueryClientProvider for us conveniently. Since the template-generated function Provider() is not needed, it can be safely removed.

[tannerlinsley]

Fixed by PR #356. The React Query provider integration is now injected in generated root route code, so the generated tanstack-query provider is used rather than being dead code.