HD•4mo 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...

5 Replies

Convex Bot•4mo 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!

Mupu•3mo ago

export function createRouter() {
  console.log('createRouter')
  const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!
  if (!CONVEX_URL) {
    console.error('missing envar CONVEX_URL')
  }
  const convexQueryClient = new ConvexQueryClient(CONVEX_URL)

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

  const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: 'intent',
      context: { 
        queryClient, 
        convexClient: convexQueryClient.convexClient,
        user: null,
      },
      scrollRestoration: true,
      // https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#passing-all-loader-events-to-an-external-cache
      defaultPreloadStaleTime: 0, // Let React Query handle all caching
      defaultErrorComponent: (err) => {
        const stack = import.meta.env.DEV ? err.error.stack : undefined
        return <p>{stack || err.error.message}</p>
      },
      defaultNotFoundComponent: () => <p>not found</p>,
    }),
    queryClient,
  )

  // https://tanstack.com/router/latest/docs/integrations/query
  setupRouterSsrQueryIntegration({
    router,
    queryClient,
    // optional:
    // handleRedirects: true,
    // wrapQueryClient: false,
  })

  return router
}

export function createRouter() {
  console.log('createRouter')
  const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!
  if (!CONVEX_URL) {
    console.error('missing envar CONVEX_URL')
  }
  const convexQueryClient = new ConvexQueryClient(CONVEX_URL)

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

  const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: 'intent',
      context: { 
        queryClient, 
        convexClient: convexQueryClient.convexClient,
        user: null,
      },
      scrollRestoration: true,
      // https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#passing-all-loader-events-to-an-external-cache
      defaultPreloadStaleTime: 0, // Let React Query handle all caching
      defaultErrorComponent: (err) => {
        const stack = import.meta.env.DEV ? err.error.stack : undefined
        return <p>{stack || err.error.message}</p>
      },
      defaultNotFoundComponent: () => <p>not found</p>,
    }),
    queryClient,
  )

  // https://tanstack.com/router/latest/docs/integrations/query
  setupRouterSsrQueryIntegration({
    router,
    queryClient,
    // optional:
    // handleRedirects: true,
    // wrapQueryClient: false,
  })

  return router
}

Mupu•3mo ago

it also goes black for me with this error

Enyel•3mo ago

Did you get it to work? I was trying to follow the docs with auth and seems to be outdated

Mupu•3mo ago

No, for now I just commented out the call. And was hoping for a answer If you guys have an account could you make a ticket like the bot suggests?

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

Did you find this page helpful?