HD•2w ago

@tanstack/react-router-ssr-query cannot work together with convex.

After integrating SSR according to the official example, the page displays blank, but I did not find any meaningful error messages in the console. doc: https://tanstack.com/router/latest/docs/integrations/query

export function createRouter() {
  const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL, {
    unsavedChangesWarning: false,
  })

  const convexQueryClient = new ConvexQueryClient(convex)

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        queryKeyHashFn: convexQueryClient.hashFn(),
        queryFn: convexQueryClient.queryFn(),
      },
    },
  })

  convexQueryClient.connect(queryClient)

  const router = createTanStackRouter({
    routeTree,
    context: { queryClient, convexClient: convex, convexQueryClient },
    ...
    Wrap: ({ children }) => (
      <ConvexProvider client={convexQueryClient.convexClient}>
        {children}
      </ConvexProvider>
    ),
  })

  // TODO: convex integration is not working with ssr query integration
  // setupRouterSsrQueryIntegration({
  //   router,
  //   queryClient,
  // })

  return routerWithQueryClient(router, queryClient)
}

export function createRouter() {
  const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL, {
    unsavedChangesWarning: false,
  })

  const convexQueryClient = new ConvexQueryClient(convex)

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        queryKeyHashFn: convexQueryClient.hashFn(),
        queryFn: convexQueryClient.queryFn(),
      },
    },
  })

  convexQueryClient.connect(queryClient)

  const router = createTanStackRouter({
    routeTree,
    context: { queryClient, convexClient: convex, convexQueryClient },
    ...
    Wrap: ({ children }) => (
      <ConvexProvider client={convexQueryClient.convexClient}>
        {children}
      </ConvexProvider>
    ),
  })

  // TODO: convex integration is not working with ssr query integration
  // setupRouterSsrQueryIntegration({
  //   router,
  //   queryClient,
  // })

  return routerWithQueryClient(router, queryClient)
}

TanStack Query Integration | TanStack Router Docs

[!IMPORTANT] This integration automates SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. If you haven't read the standard guide, start there. What you get Automatic...

1 Reply

Convex Bot•2w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

@tanstack/react-router-ssr-query cannot work together with convex.

Did you find this page helpful?