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
working with validator and zod in Server Function
i was unable to get the error handling properly because i assumed the error would be thrown to the client in its original form. Poking around i found this parameter
validateClient and it seems to let my code work, the zod error is thrown to the client, but I am getting a type error?
```typescript
export const loginFn = createServerFn({ method: 'POST', validateClient: true })
.validator(loginSchema)...Best place to attach Auth token to requests?
Where is the best place to attach my Clerk auth token to my axios for requests? Im migrating from router and had a helper function that attached the token previously, but it doesn’t seem to work the same with Start. Thanks!
Development and deployment on Cloudflare (Pages)
I thought creating a Cloudflare thread could be helpful to myself and others in the future.
I currently use https://github.com/nekochan0122/tanstack-start-with-cf-pages-env-vars in order to have a successful Cloudflare deployment with variables.
This works for variable bindings both in dev and when deployed, but other bindings, such as D1, do not work in dev (using
vinxi dev)
...Anyone has a working turborepo setup with Start. I can't do that.
Basic turbo repo + Tanstack frome example but not working. Throws error in export statement even through it is fine during individual building
In middleware, how to catch exception and return custom error code with body
The following does work:
...
setResponseStatus(422);
return { result: { error: "Validation error", status: 422 } } as any;
setResponseStatus(422);
return { result: { error: "Validation error", status: 422 } } as any;
invalidate `ensureQueryData` used in `beforeLoad`
Is there a way to invalidate
ensureQueryData data in beforeLoad so that any page that consumes the data via Route.useRouteContext can be updated?
__root.tsx
```ts
export const Route = createRootRouteWithContext<RouterContext>()({...Errors while deploying on Vercel.
I'm getting the following error while deploying on Vercel.
Everything works fine locally and the initial deployment was successful (with issues).
This is the link to the codebase: https://github.com/akinloluwami/linkdrive
...
How to debug in VSCode
I'm unable to debug the getting started app in VSCode. Tried this configuration (
.vscode\launch.json):
```json
{
"version": "0.2.0",
"configurations": [...`registerGlobalMiddleware` doesn't seem to work
I created a sample project as per the getting started guide, created a loggingMiddleware as per the documentation, and tried calling
registerGlobalMiddleware at various places, e.g. router.tsx, client.tsx, sr.tsx, root.tsx, index.tsx etc., but the middleware wasn't called. However, the middleware works when put in index.tsx locally:
```typescript
const updateCount = createServerFn({ method: 'POST' })
.middleware([loggingMiddleware])...Style (Tailwind 4.0 beta) not loading in prod.
I started working on an app using Start a few days ago, I just deployed to Vercel now but the CSS doesn't load up.
https://linkdrive-eight.vercel.app/dashboard
Here is the codebase:
https://github.com/akinloluwami/linkdrive...
throw errors in createServerFn and catch it
hey, what is the correct way to throw errors in createServerFn()? im trying this -> make a call to my backend, which returns a 400 error with a json { "error": "msg" }. inside createServerFn i check res.ok, if not, throw an Error with backend message. but, when i create a mutation with react-query, and want to manage onError, error always is 500 and default error message
returning `Response` in `createServerFn`, is it supported?
Should the following code work?
Option 1:
```ts
export const signIn = createServerFn({ method: 'POST' })...
Active link highlighting not working.
When the link is clicked, the route changes but the link styling doesn't. This is my full code below:
`import { Link, useRouter } from "@tanstack/react-router";
import * as Icons from "solar-icon-set";
import cn from "classnames";...
setup highlight.io
How to setup highlight.io ?
I'll try with React setup https://www.highlight.io/docs/getting-started/client-sdk/reactjs...
Run vitest to test API routes
Hey, I tried to run vitest to test public API routes.
I tried a few attempts at creating a dedicated
vitest.config.ts file using various plugins (tanstack-router, tanstack-start-server-fn) but none proved useful.
Digging a bit, I suppose it lies in the abstraction provided by TanStack Start's defineConfig....Server function isn't called
I started learning router and start. In the following code,
login() is only called, when the response is used afterwards (like in console.log(response)). But when I remove console.log(response), login() is not called anymore. Why is that?
```tsx
import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'...Darkmode/Themes with Start?
I'm using shadcn ui in my start project, and my themeprovider causes suspense boundary errors. When looking at the shadcn docs, there are specific instructions for NextJs and Remix, so seems like there are some additional steps needed for this to work with SSR Frameworks, has anyone done this yet?
SSR and (Framer) Motion
Is there any idiomatic way to use Motion (previously Framer Motion) with TanStack Start without getting hit by and SSR error ?
I get this error with react 19
`Uncaught Error: Switched to client rendering because the server rendering errored:...
Importing lodash causes error
Importing like
import {groupBy} from 'loadash' causes error in build
going with import groupBy from 'lodash/groupBy' works...
How to use a provider like a ThemeProvider
I am trying to set up shadcn ui with tanstack stack to play and understand about the technology. The setup is almost ready other then the dark theme which uses a provider component. I went through documentation and the attached GitHub repo from the website but I didn't found a good solution. So I am wondering now how to do this.