T
TanStack•3mo ago
sensitive-blue

Using the router-ssr-query-core in Solid

So i tried to use the @tanstack/router-ssr-query-core package in my Tanstack Start app @tanstack/solid-router, but it Seems to have just bricked my whole app. I keep geting Errors like this 
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: Error in route match: __root__
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!
Warning: null is not an object (evaluating 'router.__store')
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: Error in route match: __root__
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!
Warning: null is not an object (evaluating 'router.__store')
All i did was do exactly what the @tanstack/react-router-ssr-query package dose just manualy i added a QueryClientPrvider wraper for the app and ran the setupCoreRouterSsrQueryIntegration 
export function createRouter() {
  const queryClient = new QueryClient()
  const router = createTanStackRouter({
    routeTree,
    defaultPreload: "intent",
    defaultErrorComponent: DefaultCatchBoundary,
    defaultNotFoundComponent: () => <NotFound />,
    scrollRestoration: true,
    context: {
      queryClient
    },
    Wrap: ({ children }) => <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  })

  setupCoreRouterSsrQueryIntegration({
    router,
    queryClient
  })

  return router
}
export function createRouter() {
  const queryClient = new QueryClient()
  const router = createTanStackRouter({
    routeTree,
    defaultPreload: "intent",
    defaultErrorComponent: DefaultCatchBoundary,
    defaultNotFoundComponent: () => <NotFound />,
    scrollRestoration: true,
    context: {
      queryClient
    },
    Wrap: ({ children }) => <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  })

  setupCoreRouterSsrQueryIntegration({
    router,
    queryClient
  })

  return router
}
I think this should work as im doing exactly what the react implementation dose just my self. Also when ever i remove the setupCoreRouterSsrQueryIntegration my router is still broken. using @tanstack/router-ssr-query-core@1.131.44 and @tanstack/solid-router@1.131.44 also bun 1.2.21 On the clienat is showes Invariant failed: Could not find parent match for matchId "undefined" Any help?
2 Replies
cloudy-cyan
cloudy-cyan•3mo ago
Unfortunately the router-ssr-query doesn't work with solid yet
sensitive-blue
sensitive-blueOP•3mo ago
I got all the 
Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
Resolved by updaing my Wrap to 
Wrap: (props) => <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
Wrap: (props) => <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
At least then my app starts

Did you find this page helpful?