TanStack

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

Join

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

stormy-gold

1/3/2025

Does anyone have a minimal example with Supabase and Query?

Hello everyone, I'm looking around for some demo using both Supabase and Query. Has anyone ever worked with something like this and can share some code? PS: Happy new year!...

fascinating-indigo

1/3/2025

Bug with Start-Basic (Resolved)

I'm getting a bug with the start-basic repo. I have a simple setup with prisma + sqlite, was practicing for a live demo I'm doing on tuesday and I'm getting this error that appears to be a vite issue with fsevents and stops js from loading on the page ``` Uncaught SyntaxError: The requested module '/_build/node_modules/resolve/index.js?v=6afd501e' does not provide an export named 'default' (at app.js?v=6afd501e:3:8)...

fascinating-indigo

1/2/2025

Dead code elimination

In the dev env for this server function the code in getPlayedWords is only getting executed if that following console.log is there. The only side effect in getPlayedWords is console logging for dev/debug purposes. Is the dead code elimination being too aggressive in this case or is this as expected? ``` export const submitMoveSF = createServerFn({ method: 'POST' }) .validator((data: { userGameId: number; tiles: TileModel[] }) => data) .handler(async ({ data }) => {...

fair-rose

1/2/2025

How do I access cookies from an SSR-rendered component?

I'd really love for the first paint to arrive with the user's correct dark mode theme set. I have a very simple serverFn to grab the cookies, but it's naturally async. ``` export const getCookieFromRequest = createServerFn().handler(() => { return getRequestHeader('cookie');...

metropolitan-bronze

1/2/2025

Has anyone been able to get Inngest working with TanStack Start?

There is a nitro export in Inngest

import { serve } from "inngest/nitro";

import { serve } from "inngest/nitro";

...

jolly-crimson

12/29/2024

trpc style router

is there a reason why i shouldn't do something like this to create a trpc style router for tanstack start server functions? ```tsx import {...

fair-rose

12/28/2024

Are there documentation examples for server functions?

I feel like I'm misunderstanding something, as replicating the getServerTime example from https://tanstack.com/router/latest/docs/framework/react/start/server-functions#server-function-context triggers a Invariant failed: createServerFn must be called with a function that is marked with the 'use server' pragma. error. Is there an example app somewhere in the docs showing the correct use of server functions? For context, I'm calling getServerTime from a react hook. My hope is to write a darkMode cookie eventually!...

fascinating-indigo

12/26/2024

TanStack Start + Query + db access example

Does anyone have a simple CRUD example app that uses Start and Query with db access? I'm porting a side project from NextJS which uses these + Drizzle and trying to find a tidy way to structure my query functions => server functions => Drizzle functions for best readability and reusability

rival-black

12/26/2024

Debugging of accidental server code in the client-bundle?

Is there any plan to support a better debugging experience in cases where server side code is accidently included in the client bundle? Right now, I see errors like Buffer is not defined but the stacktrace does not reveal anything about where it's actually imported/used. Not sure if it's even possible to make it easier... Also, is something like .server.ts planned? Making sure none of the files exports are included in the client bundle?...

metropolitan-bronze

12/26/2024

What is the Vercel "framework preset" for Tanstack Start?

I am porting a Next.js app to Tanstack Start. I am still in a feature branch. I have removed all Next.js stuff, but Vercel still say it autodetected a Next.js app. I have also redeployed without the build cache. The settings also still say Next.js. So I figured I could just manually flip it over to Vinxi, but it's not an option in the list....

sensitive-blue

12/25/2024

i18n

What's the best way to implement a redirect rule in a subsection of the website /$lang/... whereby I get the language from logged in user / cookies / request and redirect to that the /$lang/... equivalent route if it's different from the parameter? Example User navigates directly to /fr/a/b/c but user is logged in and their language is en. The code should redirect to /en/a/b/c....

optimistic-gold

12/25/2024

Error: Maximum update depth exceeded while using Route.useLoaderData()

I have this server function. loader: async () => { return { project: getProjectFn(),...

optimistic-gold

12/25/2024

Tailwind css flickering unstyled css in tanstack start

I have my import './globals.css'; in the router.tsx. It's working but an unstyled css flickers before loading of the app.

optimistic-gold

12/24/2024

multiple search params with same keys

Hi. How do we do multiple search params like this with same keys for a category filter component I am building? ?category=4&category=3

ratty-blush

12/23/2024

404 page after deploying on Vercel

I get the following page after I deployed successfully on Vercel, everything works fine locally not sure what could have caused this.

absent-sapphire

12/21/2024

deploying server and client separately

is it possible to deploy the server and client separately so that we get more of a traditionally separate Node backend + React client setup? I'm not super familiar with how react full stack frameworks work, so i was wondering if something like this is still possible. E.g. if I wanted to put my server on a AWS EC2 instance with docker, can i still deploy my client on something like netlify? But still keep all the goodness that using the full stack tanstack start framework e.g. server fns, api routes etc...

genetic-orange

12/21/2024

Tanstack start debugger

Hey, I am trying to debug tanstack start using webstorm integrated debugger and I am getting pretty weird behaviour. When I update file and hit save, debugger stops on the line on image 1. However it doesn't stop on my actual breakpoint....

eastern-cyan

12/20/2024

Returning custom errors from createServerFn

In Next.js, I can't control anything about the response of a server action. It's either 200 OK with response data, or it's 500 where next assumes an unrecoverable error happened, when in reality I just want to return for example a 404 with the message "Could not find a user with that phone number". This means I have to resort to an ungly hack where I wrap my own ok: true or ok: false just to be able to pass any errors back to the client. This is what my nextjs solution is ```ts // type LoginActionResponse = // | { ok: true; data: Pick<LoginResponse, "username" | "image" | "verified"> } // | {...

optimistic-gold

12/20/2024

Important global.css TailwindCSS might be wrong

My CSS does not load instantly. You can see on the page the UI of the website without css for maybe 300 ms. I am placing the import './globals.css'; in the first line of router.tsx. Where do you put it? I tried everything but nothing works.

eastern-cyan

12/20/2024

Access environment variables inside server action

I've been trying to access environment variables from inside server actions. I've made an .env file that I have put several environment variables inside. However, when I console.log(process.env) and console.log(import.meta.env), I don't see any of my environment variables. Note that I don't want the variable to be public - so the solution is not to put vite_ in front of the variable name. From the docs:

They can access sensitive information, such as environment variables, without exposing them to the client...

Previous Next

Gaming

Programming

TanStack

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

TanStack

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