react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
📣-announcements
Hydration error when streaming data from data loader
Hello,
I am facing an hydration error when I try to use an unresolved promise in the route loader. It happens on page load, not on hmr.
I was doing some basic tests so the code is very close to the boilerplate :
...
TRPC with ensureQueryData/Prefetch
Hey Folks,
I'm having some issues with using trpc and fetching on the server before sending it down with trpc / tanstack query
am I doing something wrong here?...
`createServerFn` Zod validation works, but TS doesn’t catch invalid params at callsite?
I'm using createServerFn from
@tanstack/react-start with Zod validation to define sendEmailFn. Everything works at runtime (thanks to .validator(...)), but TypeScript doesn't enforce the parameter shape when calling sendEmailFn()—I can omit fields or add invalid ones, and TS doesn’t complain. Only Zod throws at runtime. Why isn't TypeScript checking the input types at compile-time?
Example code
```
import { createServerFn } from '@tanstack/react-start';...vite-pwa plugin does not work in production builds
dev-sw.js works, but the core issue is that sw.js doesn't get built in prod output.
is that possible that rollup might be causing the issue? if so, how to ignore that during the build.
here's my repo with a workaround:...
How do i read auth tokens during http request with axios?
I want to call react query inside loader but my axios don't have auth tokens in header (currently doing session cookie)
but my auth is being failed due to lack of auth tokens.
how do i handle auth tokens in ssr pages?...
A server function that is not available in production
I'm adding a server function that will only be used in development, I was wondering if there's a way to mark it as such and remove it from the final bundle.
I'm currently calling it from a custom plugin in tanstack devtools. I've tried to put a condition like
import.meta.DEV && customPlugin to force it to only be added in dev, but after buliding the app I can still seed the server function in the bundle....prevent db module going to client
I'm trying to execute a db query on my route loader, but my db file imports "server-only" and I'm getting this error
...
This module cannot be imported from a Client Component module. It should only be used from a Server Component.
This module cannot be imported from a Client Component module. It should only be used from a Server Component.
How do I disable <StrictMode /> during development?
I'm console.log() in beforeLoad and loader in various places and sometimes its running twice. I suspect it's because of <StrictMode /> during development causing it to render twice. I would like to turn it off so I can follow these console.log() clearly
Resend email not working with TanStack Start
I want to use Resend and react email to send email verification when I sign up using better auth, but I can't make it work in tanstack start. Neither Server Functions nor Server Routes were able to send email.
using createIsomorphicFn how can i get router context?
Hello!
I'm trying to get the route context using a createIsomorphicFn. Client I injected a window variable and it works fine. But on the server I have not idea how to get it. I can see tanstack core uses a getStartContext(), but it is not exposed, so I have no way of accessing that exported const in there. Is there a way of accessing to the context?? And for the client, is there a better way instead of having to use window?
The use case is because the fetch binding of cloudflare I need to distinct the fetch fn, in the client using normal fetch and in the server using cloudflare fetch. Then i inject the auth, locale and currency to headers. And this is why i want to access to the context as that info lives there....
Non-serializable data across server/client boundary
I'm trying to fetch some prisma data in my createServerFn, but i get an error when that data includes non JSON-serializable objects like prisma's JsonValue (as demonstrated below).
What is the recommended way of dealing with this issue?
1. Creating DTO for each model and transform non serializable data on the server into something serializable
2. I've seen people recommend
return JSON.parse(JSON.stringify(response)) but then i lose type safety...Cold start with netlify
Hey all! I’m using the Netlify hosting option for Tanstack Start, and I’m finding that the cold starts are super slow. It usually takes a few seconds for a first load.
Does anyone know of any solutions to deal with this? Does my website just need to get more popular? Is it against the Netlify TOS to hit my website automatically on a cron schedule?
Let me know if this question is better meant for Netlify support, but I figured I’d ask here in case other Tanstack Start users have run into this. Thanks!...
How to properly redirect client-side
Hi, should i use throw redirect or useNavigate() client-side?
It seems like both works.
Example: User signs a form, onSuccess redirect the user to another page....
Resend with TanStack Start
How can I use resend with tanstack start?
In their docs, they have next js integration
Send email using React
Create an API file under pages/api/send.ts if you’re using the Pages Router or create a route file under app/api/send/route.ts if you’re using the App Router....
UI Elements stop working w/ beforeLoad
I'm encountering a strange bug where if I call getCookie in my route, the UI elements (in this case tabs) don't work.
Here is the code:
```...
How to kill an SSE stream when the page is exited gracefully
Currently I'm trying to use the Request.signal from getWebRequest but I don't think it works, is this something I should be using the router for?
cookie issue in production
I'm using the below code after setting up ssr in my root page so i thought of validating the session of the user in the server side only, I'm using the following code below for the session fetching which I am calling from beforeload function of __root.tsx file, it works totally fine on localhost but when i pushed it to prod it doesn't work, I guess the issue happened as both backend and frontend are deployed on different addresses. Before ssr everything works fine . Here's the sample of my code.
```
import { createServerFn } from "@tanstack/react-start";
import { getHeaders } from "@tanstack/react-start/server";
import { authClient } from "./auth";...
Deduping function calls on the server?
Is there any method for deduping calls on the server? I have a
getSession function that I'm calling in several serverFns in the same SSR pass, and I'd like it to be invoked only once.
I tried to create a cache on the request, i.e. sessionCache.get(getWebRequest()), but seems like the returned request does not have a stable identity.
Is there anything else unique to cache by that will hold across a whole SSR pass?...how do you build tanstack start for aws-lambda?
With vinxi, there was a
preset: 'aws-lambda' property, but now that im using vite im not sure how to configure this.