diff --git a/docs/src/app/(docs)/getting-started/tanstack-start/page.mdx b/docs/src/app/(docs)/getting-started/tanstack-start/page.mdx index 6f443f28f3..d523e7fe99 100644 --- a/docs/src/app/(docs)/getting-started/tanstack-start/page.mdx +++ b/docs/src/app/(docs)/getting-started/tanstack-start/page.mdx @@ -1,12 +1,12 @@ import { docsMetadata } from "@/lib/utils"; export const metadata = docsMetadata({ - title: "Tanstack/Start Setup", - description: "Learn how to set up a Tanstack/Start project with UploadThing", + title: "TanStack Start Setup", + description: "Learn how to set up a TanStack Start project with UploadThing", category: "Getting Started", }); -# Getting Started with Tanstack/Start +# Getting Started with TanStack Start ## Package Setup @@ -29,9 +29,9 @@ UPLOADTHING_TOKEN=... # A token for interacting with the SDK - Tanstack Start is currently in beta, this guide works at the time of writing - (`v1.95.0`) but there might be some breaking changes introduced in the - framework that we have not kept up to date with. + TanStack Start is currently in release candidate (RC). The APIs in this guide + match the current v1 RC server-route conventions, but may still change before + 1.0. ## Set Up A FileRouter @@ -52,7 +52,7 @@ of a FileRoute similar to an endpoint, it has: To get full insight into what you can do with the FileRoutes, please refer to the [File Router API](/file-routes). -```ts {{ title: "app/server/uploadthing.ts" }} +```ts {{ title: "src/server/uploadthing.ts" }} import { createUploadthing, UploadThingError } from "uploadthing/server"; import type { FileRouter } from "uploadthing/server"; @@ -101,28 +101,31 @@ export type UploadRouter = typeof uploadRouter; ### Create an API route using the FileRouter - File path here doesn't matter, you can serve this from any route. We recommend - serving it from `/api/uploadthing`. + TanStack Start server routes can live anywhere under `src/routes`, but this + guide uses `src/routes/api/uploadthing.ts` so the endpoint is served from + `/api/uploadthing`. - - Make sure to configure API entry handler in `app/api.ts`. For more - information, please refer to the [@tanstack/start - docs](https://tanstack.com/router/latest/docs/framework/react/start/api-routes#setting-up-the-entry-handler). - - -```ts {{ title: "app/routes/api/uploadthing.ts" }} -import { createAPIFileRoute } from "@tanstack/start/api"; +```ts {{ title: "src/routes/api/uploadthing.ts" }} +import { createFileRoute } from "@tanstack/react-router"; import { createRouteHandler } from "uploadthing/server"; import { uploadRouter } from "../../server/uploadthing"; -const handlers = createRouteHandler({ router: uploadRouter }); - -export const Route = createAPIFileRoute("/api/uploadthing")({ - GET: handlers, - POST: handlers, +const handler = createRouteHandler({ router: uploadRouter }); + +export const Route = createFileRoute("/api/uploadthing")({ + server: { + handlers: { + GET: async ({ request }) => { + return handler(request); + }, + POST: async ({ request }) => { + return handler(request); + }, + }, + }, }); ``` @@ -135,7 +138,7 @@ We provide components to make uploading easier. We highly recommend re-exporting them with the types assigned, but you CAN import the components individually from `@uploadthing/react` instead. -```ts {{ title: "app/utils/uploadthing.ts" }} +```ts {{ title: "src/utils/uploadthing.ts" }} import { generateReactHelpers, generateUploadButton, @@ -189,7 +192,7 @@ export const { useUploadThing } = generateReactHelpers(); Include our CSS file in the root layout to make sure the components look right! - ```tsx {{ title: "app/routes/__root.tsx" }} + ```tsx {{ title: "src/routes/__root.tsx" }} import uploadthingCss from "@uploadthing/react/styles.css?url"; export const Route = createRootRoute({ @@ -204,12 +207,12 @@ export const { useUploadThing } = generateReactHelpers(); ## Mount A Button And Upload! -```tsx {{ title: "app/routes/index.tsx" }} +```tsx {{ title: "src/routes/index.tsx" }} import { createFileRoute } from "@tanstack/react-router"; import { UploadButton } from "../utils/uploadthing"; -export const APIRoute = createFileRoute("/")({ +export const Route = createFileRoute("/")({ component: Home, });