Transcript · Josef Bender

Data Sharing in TanStack Start: Easier than you think!

5:421,124 words6 min read

0:00

Speaker A

Tanstax Start is not normal. The ease at which you can create applications using Tanstax Start is not something you find anywhere. It's not something I've seen in any other framework. And I've been using tanstaxt since it was in beta. A lot of features have come along the way and every time I'm just surprised how easy it is and also fun to create Full Stack applications. In React. Before Tanstack Start, I would just call myself front end developer because I just didn't like dealing with other Full Stack frameworks. But with Tanstack Start, it's all beautiful. So in this video I want to show you one reason why you should definitely check out Tanstack Start. So I have this website here that I have built from scratch with Tanstack Start and this is Tanstack Weekly. You probably heard me talking about it either on Twitter or one of my previous videos.

0:00A man in a white sweater is speaking into a black microphone, looking slightly down and to the right with a gentle smile. The background shows an indoor setting with large windows on the left and a dresser with decorative items, including a saxophone, on the right.

0:12The man in the white sweater continues to speak into the black microphone, looking slightly to the right with a neutral expression. The background remains consistent, featuring windows and a dresser with decorative items.

0:24The man in the white sweater is speaking into the black microphone, now looking directly at the camera with a slight smile. The background is consistent with previous frames, showing an indoor setting with windows and a dresser.

0:36A man is speaking directly into a black microphone, positioned centrally in front of him. He is wearing a light-colored sweater. The background is softly blurred, showing an indoor setting with large windows and some furniture, suggesting a home or office environment.

0:38The screen is split, with the speaker on the right side, continuing to speak into the microphone. The left side displays a website titled 'TanStack Weekly'. The main content area features a 'Join Newsletter' section with a description, an email input field, and a 'Join' button. Text below the button assures 'No spam, unsubscribe anytime.'

0:48The screen composition remains similar, with the speaker on the right and the 'TanStack Weekly' website on the left. The 'Join Newsletter' section is still visible. Below it, a 'What Members Say' section features two testimonials: one from 'Kevin Thomas Van Cott, Official TanStack Maintainer' and another from 'Alem Tuzlak, TanStack Devtools Maintainer', both praising the newsletter.

0:48

This is a newsletter that talks about Tanstack Weekly. I send it every week. Check it out if you haven't already. But the point of this is that if you go to Previous issues here we have an archive of the previous issues that I have sent and if you go, let's say to the second issue, then you have the issue itself. And what I would like to have here is some kind of navigation buttons. So I want to navigate between the previous and the next issues. So it'd be cool to have a previous button here and a next button on the right. And the way that I found to solve this in Tazak Start is very beautiful because if you take a look at the application structure, if you go to issues, we are at issues and we are getting all this data from a third party tool which is in this case recent.

1:00The speaker is still visible on the right, addressing the camera. The left side of the screen now shows the 'Previous Issues' page of the 'TanStack Weekly' website. It lists three past newsletter issues with their titles and brief content summaries. Below the list, the 'Join Newsletter' section is still present.

1:12A man is speaking into a microphone on the right side of the screen. On the left, a webpage displays "TanStack Weekly" issue #2, titled "Tanner's Interview, Router, Prisma and Building ChatGPT Apps," sent on 2025-11-20. The article discusses Tanner Linsley's interview on SyntaxFM, covering topics like TanStack DB, "use workflow" directives, React Server Components, and a new teased TanStack project. It also mentions "TanStack Router Getting 20Kx Faster" with a YouTube link.

1:24The scene remains the same as the previous frame. A man is speaking into a microphone on the right, while the left side displays the "TanStack Weekly" webpage, issue #2, titled "Tanner's Interview, Router, Prisma and Building ChatGPT Apps." The visible content continues to detail Tanner Linsley's interview and the performance improvements of TanStack Router.

1:34

And if you click on a link you land in Issues id. Let's take a look at the application structure for that. So here we have our issues. So this is the index page and here we just show all the issues. And this is the list that we were talking about here. And inside Issues ID you have the component itself and we are showing it as a markdown. And this is what happens when you click on an issue. Now the problem that I have here is that the data that I am loading here is a bit different. So inside Issue id, let me just add a few spaces. Here you have this loader that gets an issue by id. So get issue function and this makes the API call to recent backend and then inside the index TS function file where all the issues are listed, we have this get issues function which returns an array of issues and this is what we are showing inside the list.

1:36A man is speaking into a microphone on the right. The webpage on the left has updated to "TanStack Weekly" issue #3, titled "TanStack Start Middleware, Pacer Beta, and more!," sent on 2025-11-30. The visible text includes a greeting and an introduction, followed by a colorful graphic featuring a palm tree and beach elements.

1:48A man is speaking into a microphone on the right side of the screen. On the left, a webpage displays a newsletter titled "#3: TanStack Start Middleware, Pacer Beta, and more!" sent on 2025-11-30. The newsletter content starts with a greeting and an invitation to dive in.

2:00A man is speaking into a microphone on the right. On the left, a webpage shows a previous newsletter issue titled "#2: Tanner's Interview, Router, Prisma and Building ChatGPT Apps" sent on 2025-11-20. Visible sections include "Tanner's Interview on SyntaxFM" with details about GitHub Universe and React Server Components, and "TanStack Router Getting 20Kx Faster", along with a YouTube link.

2:12The man is visible on the right, looking at the screen. On the left, a code editor (VS Code) is open, displaying a TypeScript file named `$id.tsx` within a `routes/issues` directory. The code shows imports and a `createFileRoute` function, suggesting a routing setup for displaying newsletter issues. The file explorer pane is also visible, showing the project structure for 'TANSTACK-WEEKLY'.

2:24A developer is shown on the right, speaking into a microphone, while on the left, a VS Code editor displays TypeScript/TSX code. The active file is `index.tsx` within the `routes/issues` directory. The code defines a `RouteComponent` that renders a list of "Previous Issues" using `data.issues.map` to create `Link` components for individual issues. The file explorer pane highlights the `issues` directory and `_id.tsx` file.

2:27

So what I want to do here is share this data that is in issues with the sub route id and for that we can take advantage of context. And no, I'm not talking about react context, which could also be a solution here, but it's just a lot of boilerplate code and also needs to work on the client side. And for this we're going to be using actually Tanstack router context. I'm saying router because Tanstack start is based on router. And what I'm showing you here also works in Tanstack router. So let's take this loader function and put it in a context and for that we're going to have a layout route. So let's create a layout. So new file I'm going to call this issues and this has to be the same name as the folder where the subroutes are. So issues tsx. This is of course generated directly because I'm running the development server in the background.

2:36The developer continues speaking on the right. The VS Code editor on the left now displays the `_id.tsx` file within `routes/issues`. The code shows imports for various modules, `createFileRoute` for a dynamic route `"/issues/$id"`, and a `RouteComponent` that uses `useLoaderData` to access `loaderData.name` and `loaderData.preview_text` for SEO metadata. The file explorer pane still highlights the `issues` directory and `_id.tsx` file.

2:48This frame is identical to the previous one. The developer is speaking on the right, and the VS Code editor on the left displays the `_id.tsx` file. The code shows imports, `createFileRoute` for `"/issues/$id"`, and a `RouteComponent` utilizing `useLoaderData` for SEO metadata. The file explorer pane continues to highlight the `issues` directory and `_id.tsx` file.

3:00A person is visible on the right, looking at a computer screen displaying a VS Code editor. The editor shows a TypeScript file named `$id.tsx` open, containing code for defining a route and its associated component, including imports for various modules. The file explorer on the left highlights the `issues` directory and the `$id.tsx` file within it.

3:12The screen shows a VS Code editor with the file explorer open. A red error message box is prominently displayed in the file explorer, stating: "A file or folder issues already exists at this location. Please choose a different name." This indicates an attempt to create a duplicate file or folder. The person is still visible on the right, observing the screen.

3:18

And we can actually get rid of this route component because this is not going to show anything, it's just going to show the children. And here we can load the data in the context. And for that we're going to be using a function called before load. So let me take this code from here, this loader, and I'm going to use it over here. And this is before load. And let me just import this as well. And before load is called before. Basically the loader is called. But what happens is that the result that we have here is also added to to the context. And now in the sub routes we can get access to this context. So inside issues we can replace this useloader data with use route context. You can see this data is right now there and it's also correctly typed. If I go back here and remove this loader function, save and go back, you're going to see that we have an error because actually Tazak Start has no idea what we're talking about.

3:24The screen displays a VS Code editor with a new TypeScript file named `issues.tsx` open. The file contains initial code for defining a route using `createFileRoute` from `@tanstack/react-router`. An 'Expression expected.' error is visible on line 4 within the code editor. The file explorer on the left shows `issues.tsx` alongside `$id.tsx` and `index.tsx` within the `routes` directory. The person is still visible, looking at the screen.

3:36The frame shows a developer working in VS Code, with the 'issues.tsx' file open. The code highlights an error related to a 'beforeLoad' property within a 'createFileRoute' function, indicating a syntax or type issue. The file explorer shows the 'issues.tsx' file nested under 'routes/issues'.

3:48The frame shows the developer in VS Code, with the 'issues.tsx' file open. The previous error has been resolved, and the 'beforeLoad' property is now correctly assigned to an arrow function calling 'getIssuesFn()'. A type definition for 'getIssuesFn' is also visible, indicating it returns a Promise.

4:00The frame shows the developer in VS Code, with the 'index.tsx' file open, located within the 'issues' route. The code defines a 'RouteComponent' that retrieves context data and renders a list of 'Previous Issues'. Each issue's name is displayed as a link, suggesting navigation to individual issue pages.

4:12A man is looking at a code editor displaying TypeScript/React code. The editor shows a type error: "Property 'issues' does not exist on type '{}'" when attempting to map over `data.issues` within a `RouteComponent`. A microphone is visible in the foreground.

4:13

But when you define a beforeload function, the type system just gets it automatically. And it's super easy for you as a developer, you don't have to worry about types matching and whatnot. Now, inside the ID route, I actually already have this previous ID and next ID defined with undefined. And I'm also passing them to this component here called newsletternavigation that is going to show the previous and next buttons. And now we just need to calculate the previous ID and the Next ID using a function in this case called getneighborentries. And this function is going to get the ID of the current issue that is right now open, so we can grab it over here. And this function literally just checks for the index of the current issue and gets the previous one and the next one using the index. And now that you have Previous ID and Next id, we can use it to show the navigation.

4:24The man continues to look at the code editor, which still displays the same TypeScript/React code with the type error "Property 'issues' does not exist on type '{}'" highlighted on `data.issues.map`. The code is part of a `RouteComponent` function.

4:36The man is still viewing the code editor, but the code has changed significantly. The `RouteComponent` now uses `Route.useLoaderData()` instead of `Route.useRouteContext()`, and the previous error is gone. The code displays variables like `html`, `name`, and `sent_at`, and a tooltip for `HTMLAttributes<HTMLDivElement>.className` is visible.

4:48A developer is shown on the right, looking at a code editor on the left. The editor displays TypeScript/TSX code for a `RouteComponent` in a file named `$id.tsx`, showing the use of `useRouteContext` and `getNeighborEntries` to retrieve `previousId` and `nextId`, and then rendering `NewsletterNavigation` and other UI elements.

5:00A developer is visible on the right, observing a code editor on the left. The editor displays TypeScript/TSX code for a `RouteComponent` in `$id.tsx`, demonstrating the use of `useLoaderData`, `useRouteContext`, and `getNeighborEntries`. The JSX includes `NewsletterNavigation` and a `Markdown` component.

5:03

So. So let's go back to our application and there we have it. We have Previous and Next buttons. I'm showing them in the top as well as in the bottom. And when you click on previous, you navigate to the first issue, Next and Next again. And as you can see when we arrive at the end, the Next button is hidden because the value of Next ID is undefined. Thanks for watching the video. If you have enjoyed it, please let me know in the comments below. By the way, I'm almost at 10,000 subscribers, so. So it would be awesome if you could subscribe as well. That way we can reach 10,000 subscribers before the end of the year. Thanks again for watching and see you in the next video.

5:12A developer is on the right, looking at a screen displaying a document or web page on the left. The content includes articles or sections titled "Prisma is Making Big Moves!", "Building ChatGPT Apps with TanStack Start", and "Cloudflare's Outage", with descriptive text and embedded URLs.

5:24The screen is split, showing a dark-themed newsletter on the left and a speaker on the right. The newsletter is titled "TanStack Weekly" and features an article titled "#3: TanStack Start Middleware, Pacer Beta, and more!" with a greeting to "Hey devs". A small image of a tropical island is partially visible at the bottom of the newsletter. The speaker is a man with dark hair, wearing a light-colored sweater, looking directly at the camera and speaking into a black microphone.

5:25A man with dark hair, wearing a light-colored sweater, is speaking directly into a black microphone, which is centered in front of him. He is smiling slightly. The background is blurred, revealing an indoor setting with a window on the left and a dresser with a saxophone on the right.