TanStack

T

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

optimistic-gold
optimistic-gold3/21/2025

Tanstack Start as a PWA

Hello, Has anyone managed to create a Progressive Web App (PWA) from a TanStack Start application? I have tried using vite-plugin-pwa (https://vite-pwa-org.netlify.app/) without any success. I know this was asked in the past, but I haven't found a solution or example repository....
optimistic-gold
optimistic-gold3/21/2025

Caching on server with TTL

I can't find anything in the docs (great products by the TanStack team but the docs are pretty barebones) around caching data on the server so hoping someone here might be able to validate/reject my my idea. I've got an async data loader for my root route that makes a request (could be many in the future) to an async api (at it's just a db) . I realistically only need to make this request once per user and so would be great if I could cache the result on the server and have some way to invalidate the cache when the user takes an action that requires the data to be refetched. I saw there's a static function server cache from the docs but from what I understand:...
extended-salmon
extended-salmon3/21/2025

How to enable i18n and nprogress client-side ?

Hello, below is how I managed to add nprogress as well as loading the react-i18next extension. Is this the proper way? Here is my client.tsx file: ```typescript...
probable-pink
probable-pink3/21/2025

nextjs migration

hey there. i'm potentially looking at migrating from nextjs - we have ~8m build times, ~60s initial HMR builds locally, and site navigation often feels slower than it should be - it's really not optimal. i'm therefore wondering if tanstack is a viable option to migrate to - it's amazing that we can deploy anywhere (we have vercel right now, but might be looking for cloudflare since it's cheaper and less painful to deal with). a lot of our data fetching is clientside (supabase-like), and i like the first party support for server actions + RSC (which vite doesn't have as of yet). also, what would the migration complexity be like? it's all react so should be fine, but is there any estimate that someone else has with their app?...
metropolitan-bronze
metropolitan-bronze3/21/2025

Error when building with getWebRequest() in loader

I have this error when run build:
"AsyncLocalStorage" is not exported by "__vite-browser-external", imported by "../../node_modules/.pnpm/vinxi@0.5.3_@types+node@22.13.10_db0@0.3.1_drizzle-orm@0.39.3_@neondatabase+serverless@0.10.4_cnofzffdinxbdcnzy4hyqutbei/node_modules/vinxi/runtime/http.js
"AsyncLocalStorage" is not exported by "__vite-browser-external", imported by "../../node_modules/.pnpm/vinxi@0.5.3_@types+node@22.13.10_db0@0.3.1_drizzle-orm@0.39.3_@neondatabase+serverless@0.10.4_cnofzffdinxbdcnzy4hyqutbei/node_modules/vinxi/runtime/http.js
When i run dev everything works fine...
rival-black
rival-black3/20/2025

Errors on default template

Hi, I'm evaluating tanstack start. I was simply testing the supabase auth example. I cloned it with...
sensitive-blue
sensitive-blue3/20/2025

Angular SSR and Tanstack

I have fully-client-rendered application and mostly using @tanstack/angular-query-experimental, how hard would be to have that now moved to the server side. Is it doable at all?
fascinating-indigo
fascinating-indigo3/20/2025

Sharing router.context.queryClient and persistence hydration

Hey guys, I'm currently using the Start template with Router, Query and Persist Client. What I'm trying to do is, having a query so that client-side part can persist access token and hydrate them on mount. I'm trying to reuse the queryClient from router context instead of creating a new client. Somehow it doesn't work because the dataUpdatedAt from the storage will always be lt query.state.dataUpdatedAt which void the setter of state. https://github.com/TanStack/query/blob/a9b073a85edc45331d4b346be8e5bf2660507e53/packages/query-core/src/hydration.ts#L200 ...
correct-apricot
correct-apricot3/20/2025

Dependency on Tailwind

Why does start have a dependency on Tailwind? I'd rather use it without
fair-rose
fair-rose3/20/2025

I use SvelteQuery with Svelte tRPC. How to send error or success response ?

Here i create authenticate logic for logged in the user ```typescript export const authenticateUser = async (formData: z.infer<LoginSchema>) => { const { username, password } = formData;...
optimistic-gold
optimistic-gold3/20/2025

Path alias not working

Not sure if this is the right place for this but I'm having an issue with trying to use a Typescript path alias.
Error: Cannot find module '@/lib/theming' imported from 'D:/Git/tanstack-test/apps/www/src/routes/__root.tsx'
Error: Cannot find module '@/lib/theming' imported from 'D:/Git/tanstack-test/apps/www/src/routes/__root.tsx'
...
No description
extended-salmon
extended-salmon3/19/2025

Centralized Error Handling and Middleware Errors

Hello, I'm coming from a Python/Flask background for backend development, and I am struggling in tanstack Start to handle errors in general. In the flask world we can create something like this: ```python...
multiple-amethyst
multiple-amethyst3/19/2025

Is there a more idiomatic way to do this? Getting Auth Data from Server and Client

So, I am using better auth and Start. I want to eliminate any flicker. that means checking auth status in loaders, but if the user signs out (or signs in) since this is also a SPA, we should use client data as well. That lead me to do the following in routes/__root.tsx: ```tsx export const authStateFn = createServerFn({method: "GET"}).handler(async () => {...
xenial-black
xenial-black3/19/2025

Deployments to Cloudflare Workers

Is there a particular reason why Start don't support the cloudflare_module preset even though Nitro supports it? I assumed since Start is built on Nitro that it would support any presets that Nitro does out of the box....
adverse-sapphire
adverse-sapphire3/19/2025

server only code used in server function but in another file

I have some server code in file a and want to import that and use it in a server function in file b. But for some reason it is still kept in my client bundle..... Do I need to wrap everything in a server function? what is the expected way of working with this?
xenophobic-harlequin
xenophobic-harlequin3/18/2025

Not able to configure base path.

I'm trying to serve a TanStack Start app off a base path ie. /tan. Here's what I've tried. - Setting only basepath: "/tan" in the createTanStackRouter() => all css and js are served off root "/", not "/tan" (screenshot 1) - Setting both basepath: "/tan" in the createTanStackRouter(), and also vite.base: "/tan" in app.config.ts => css is served off "/tan", js are served off root "/" (screenshot 2) ...
No description
helpful-purple
helpful-purple3/18/2025

Accessing cookies in `loader`

I asked this question on twitter earlier today (https://x.com/radek_1313/status/1901999925858087293?s=46) I'm storing my bearer token in cookie so that it can be accessible both on client and server. 1. beforeLoad...
flat-fuchsia
flat-fuchsia3/18/2025

How to differentiate `/blog/$page` from `/blog/$slug` (where page is numeric)

In SvelteKit, I use a param matcher. If it matches, it loads. If not, it falls back to another less specific route. If none, it 404's. Is similar possible in TS Start? I don't see it documented in TSS or TSR, where only the type or pattern of the param differs. I'm using a mix of file & flat routes....
No description
ratty-blush
ratty-blush3/18/2025

Flash of incorrect route before navigation

I'm experiencing an issue where I'm seeing the wrong route before being navigated to the correct route via router.navigate(). I'm positive it's due to me not yet having a complete mental model of how Tanstack Start/Router works, so any help would be very appreciated. In my app, when users navigate to /onboarding, I want to first see if there is an eligible existing organization for them to join. If there is, they should be redirected to /onboarding/join. If there isn't, they can create a new organization at the /onboarding index route. Here's the logic in the /onboarding layout route (routes/onboarding/route.tsx):...