T
TanStack•2mo ago
afraid-scarlet

General observations about docs: database/path aliases

Path Aliases 1. "By default, TanStack Start does not include path aliases" - not true 2. As i see, @ symbol is used in imports Databases Could use examples, at least for Recommended Database Providers. For example: Install needed packages: 
npm i @neondatabase/serverless
npm i -D @neondatabase/vite-plugin-postgres
npm i @neondatabase/serverless
npm i -D @neondatabase/vite-plugin-postgres
Define object for database connection 
import { neon } from '@neondatabase/serverless'

export const sql = neon(process.env.DATABASE_CONNECTION_STRING!)
import { neon } from '@neondatabase/serverless'

export const sql = neon(process.env.DATABASE_CONNECTION_STRING!)
Then use it in server function (or loader or any server executed code) 
export const Route = createFileRoute('/test-data-from-db')({
    component: RouteComponent,
    // Loaders run on server (unless defined otherwise with disabling SSR
    // or SPA mode). Database connections (queries) should always run on server
    // to not leak connection details to client.
    loader: async () => {
        const testData = await sql.query('select * from public.test_table')
        return testData
    },
})
export const Route = createFileRoute('/test-data-from-db')({
    component: RouteComponent,
    // Loaders run on server (unless defined otherwise with disabling SSR
    // or SPA mode). Database connections (queries) should always run on server
    // to not leak connection details to client.
    loader: async () => {
        const testData = await sql.query('select * from public.test_table')
        return testData
    },
})
Path Aliases | TanStack Start React Docs
Path aliases are a useful feature of TypeScript that allows you to define a shortcut for a path that could be distant in your project's directory structure. This can help you avoid long relative impor...
Databases | TanStack Start React Docs
Databases are at the core of any dynamic application, providing the necessary infrastructure to store, retrieve, and manage data. TanStack Start makes it easy to integrate with a variety of databases,...
4 Replies
afraid-scarlet
afraid-scarlet•2mo ago
"By default, TanStack Start does not include path aliases" - not true As i see, @ symbol is used in imports
where is it used? in the examples?
afraid-scarlet
afraid-scarletOP•2mo ago
Well, when i scaffold project with CLI
rare-sapphire
rare-sapphire•2mo ago
What the docs means that path aliases are not automatically added by start (@tanstack/react-start/plugin/vite) so you need to manually add another plugin to handle path aliases. But scaffolding the project using CLI adds vite-tsconfig-paths plugin for you. But again, the docs mean that path alias is outside of start's scope. If that is difficult to understand, then the docs should be rephrased to be more comprehensible
afraid-scarlet
afraid-scarletOP•2mo ago
ok, understood, thanks for clarifications! 🙂

Did you find this page helpful?