> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.
# TanStack Start Quickstart
> Add Bijection to a TanStack Start project
**TanStack Start is in Release Candidate**
[TanStack Start](https://tanstack.com/start/latest) is a new React framework
currently in the Release Candidate stage. You can use it today but there may be
bugs or breaking changes before a stable release.
To use an auth provider with Bijection and TanStack Start, see the
[TanStack Start + Clerk guide](/client/tanstack/tanstack-start/clerk) or the
[TanStack Start + WorkOS AuthKit guide](/auth/authkit/add-to-app).
***
Learn how to query data from Bijection in a TanStack Start site.
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
curl -fsSL https://bijection.com/install.sh | sh
```
See [Install Bijection](/get-started/install) for PATH setup and supported
platforms.
Create a TanStack Start app using the `create-start-app` command:
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
npx create-start-app@latest
```
In the site's directory, run `bijection init`. It adds a `bijection/`
folder, where you write your backend functions, with a sample schema, query
and mutation, and `bijection.json`.
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
bijection init
```
The Bijection SDK (`bijection/react`, `bijection/browser`, …) is not published
to the npm registry. Your app declares it as a tarball from bijection.com, for
the version of your CLI (`bijection --version` prints it). Add this line to the
`dependencies` in your app's `package.json`:
```json package.json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
"bijection": "https://bijection.com/sdk/bijection-0.1.1.tgz"
```
Then install your app's dependencies with its package manager as usual (for
example `npm install`). The `react-vite` and `nextjs` templates of
`bijection init` write this line and run the install for you.
Also add the Bijection React Query integration and TanStack's React Query
packages with your package manager:
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
npm install @bijection/react-query @tanstack/react-router-ssr-query @tanstack/react-query
```
Add a `QueryClient` to the router context to make React Query usable anywhere in the TanStack Start site.
```tsx {1-2,6-8} theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { QueryClient } from "@tanstack/react-query";
import { createRootRouteWithContext } from "@tanstack/react-router";
import { Outlet, Scripts, HeadContent } from "@tanstack/react-router";
import * as React from "react";
export const Route = createRootRouteWithContext<{
queryClient: QueryClient;
}>()({
head: () => ({
meta: [
{
charSet: "utf-8",
},
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{
title: "TanStack Start Starter",
},
],
}),
component: RootComponent,
});
function RootComponent() {
return (
);
}
function RootDocument({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Replace the file `src/router.tsx` with these contents.
This creates a `BijectionClient` and a `BijectionQueryClient` and wires in a `BijectionProvider`.
```tsx theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { createRouter } from "@tanstack/react-router";
import { QueryClient } from "@tanstack/react-query";
import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
import { BijectionQueryClient } from "@bijection/react-query";
import { BijectionProvider } from "bijection/react";
import { routeTree } from "./routeTree.gen";
export function getRouter() {
const BIJECTION_URL = (import.meta as any).env.VITE_BIJECTION_URL!;
if (!BIJECTION_URL) {
console.error("missing envar VITE_BIJECTION_URL");
}
const bijectionQueryClient = new BijectionQueryClient(BIJECTION_URL);
const queryClient: QueryClient = new QueryClient({
defaultOptions: {
queries: {
queryKeyHashFn: bijectionQueryClient.hashFn(),
queryFn: bijectionQueryClient.queryFn(),
},
},
});
bijectionQueryClient.connect(queryClient);
const router = createRouter({
routeTree,
defaultPreload: "intent",
context: { queryClient },
scrollRestoration: true,
Wrap: ({ children }) => (
{children}
),
});
setupRouterSsrQueryIntegration({ router, queryClient });
return router;
}
```
Log this machine in to Bijection, once per machine, then run
`bijection dev`. The first run creates your dev deployment and saves its URL
in `.env.local` as `VITE_BIJECTION_URL`. The `dev` command then keeps
running to push your functions in `bijection/` to your dev deployment on
every change.
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
bijection login
bijection dev
```
Bijection's hosted service is not yet open for public sign-up, and the CLI
has no default management service. Before running `bijection login`, set
`BIJECTION_MANAGEMENT_URL` to the management service URL you were given, in
your shell's startup file so that every later `bijection` command sees it too:
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
export BIJECTION_MANAGEMENT_URL=https://
```
In a new terminal window, create a `sampleData.jsonl`
file with some sample data.
```json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
{"text": "Buy groceries", "isCompleted": true}
{"text": "Go for a swim", "isCompleted": true}
{"text": "Integrate Bijection", "isCompleted": false}
```
Now that your project is ready, add a `tasks` table
with the sample data into your Bijection database with
the `import` command.
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
bijection import --table tasks sampleData.jsonl
```
`bijection init` created `bijection/schema.ts`, which declares the tables of
your database, starting with a sample `messages` table. Add a `tasks` table
beside it. The schema gives your functions TypeScript types, and Bijection
enforces it at runtime.
```ts bijection/schema.ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { defineSchema, defineTable } from "bijection/server";
import { v } from "bijection/values";
export default defineSchema({
messages: defineTable({
author: v.string(),
body: v.string(),
}),
tasks: defineTable({
text: v.string(),
isCompleted: v.boolean(),
}),
});
```
Add a new file `tasks.ts` in the `bijection/` 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`.
```ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { query } from "./_generated/server";
export const get = query({
args: {},
handler: async (ctx) => {
return await ctx.db.query("tasks").collect();
},
});
```
Replace the file `src/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.
```tsx {2,11} theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { bijectionQuery } from "@bijection/react-query";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { api } from "../../bijection/_generated/api";
export const Route = createFileRoute("/")({
component: Home,
});
function Home() {
const { data } = useSuspenseQuery(bijectionQuery(api.tasks.get, {}));
return (
{data.map(({ _id, text }) => (
{text}
))}
);
}
```
Start the app, open [http://localhost:3000](http://localhost:3000) in a browser,
and see the list of tasks.
```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
npm run dev
```
For more see the
[TanStack Start with Bijection](/client/tanstack/tanstack-start/index) client
documentation page.