TanStack Start Quickstart - Convex Backend

import sampleData from "!!raw-loader!@site/../private-demos/quickstarts/tanstack-start/sampleData.jsonl"; import appRoutesRoot from "!!raw-loader!@site/../private-demos/quickstarts/tanstack-start/src/routes/__root.tsx"; import router from "!!raw-loader!@site/../private-demos/quickstarts/tanstack-start/src/router.tsx"; import index from "!!raw-loader!@site/../private-demos/quickstarts/tanstack-start/src/routes/index.tsx"; import tasks from "!!raw-loader!@site/../private-demos/quickstarts/tanstack-start/convex/tasks.ts";

TanStack Start is a new React framework currently in the Release Candidate stage. You can try it today but there might still be bug or issues.

</Admonition>

To get setup quickly with Convex and TanStack Start run

or follow the guide below.

To use Clerk with Convex and TanStack Start, see the TanStack Start + Clerk guide

Learn how to query data from Convex in a TanStack Start site.

Create a TanStack Start app using the create-start-app command:

```sh
npx create-start-app@latest
```

</Step> <Step title="Install the Convex client and server library"> To get started with Convex install the `convex` package and a few React Query-related packages.

```sh
npm install convex @convex-dev/react-query @tanstack/react-router-with-query @tanstack/react-query
```

</Step> <Step title="Update app/routes/__root.tsx"> Add a `QueryClient` to the router context to make React Query usable anywhere in the TanStack Start site.

<Snippet
  source={appRoutesRoot}
  title="app/routes/__root.tsx"
  highlightPatterns={[ "createRootRouteWithContext", "QueryClient", "\\}\\>\\(\\)\\(\\{"]}
/>

</Step> <Step title="Update app/router.tsx"> Replace the file `app/router.tsx` with these contents.

This creates a `ConvexClient` and a `ConvexQueryClient` and wires in a `ConvexProvider`.

<Snippet
  source={router}
  title="app/router.tsx"
/>

</Step> <Step title="Set up a Convex dev deployment"> Next, run `npx convex dev`. This will prompt you to log in with GitHub, create a project, and save your production and deployment URLs.

It will also create a `convex/` folder for you
to write your backend API functions in. The `dev` command
will then continue running to sync your functions
with your dev deployment in the cloud.


```sh
npx convex dev
```

</Step> <Step title="Create sample data for your database"> In a new terminal window, create a `sampleData.jsonl` file with some sample data.

<Snippet
  source={sampleData}
  title="sampleData.jsonl"
/>

</Step> <Step title="Add the sample data to your database"> Now that your project is ready, add a `tasks` table with the sample data into your Convex database with the `import` command.

```
npx convex import --table tasks sampleData.jsonl
```

</Step> <Step title="Expose a database query"> Add a new file <JSDialectFileName name="tasks.ts" /> in the `convex/` folder with a query function that loads the data.

Exporting a query function from this file
declares an API function named after the file
and the export name, `api.tasks.get`.

<Snippet
  source={tasks}
  title="convex/tasks.ts"
/>

</Step> <Step title="Display the data in your app"> Replace the file `app/routes/index.tsx` with these contents.

The `useSuspenseQuery` hook renders the API function `api.tasks.get`
query result on the server initially, then it updates live in the browser.

<Snippet
  source={index}
  title="app/routes/index.tsx"
  highlightPatterns={[ "useSuspenseQuery" ]}
/>

</Step> <Step title="Start the app"> Start the app, open [http://localhost:3000](http://localhost:3000) in a browser, and see the list of tasks.

```sh
npm run dev
```

</Step> </StepByStep>

For more see the TanStack Start with Convex client documentation page.