MongoDBと Transstack Start の統合

npm create @tanstack/start@latest

import { defineConfig } from 'vite'import { devtools } from '@tanstack/devtools-vite'import { tanstackStart } from '@tanstack/react-start/plugin/vite'import viteReact from '@vitejs/plugin-react'import viteTsConfigPaths from 'vite-tsconfig-paths'import tailwindcss from '@tailwindcss/vite'import { nitro } from 'nitro/vite'
const config = defineConfig({  plugins: [    devtools(),    nitro(),    // this is the plugin that enables path aliases    viteTsConfigPaths({      projects: ['./tsconfig.json'],    }),    tailwindcss(),    tanstackStart(),    viteReact(),  ],  optimizeDeps: {    // Exclude this server-side dependency to avoid bundling errors    exclude: ['mongodb-client-encryption'],  },  ssr: {    // Ensure this module is externalized during server-side rendering    external: ['mongodb-client-encryption'],  },})
export default config

npm install mongodb @tanstack/react-query

rm -rf src/datarm -rf src/routes/demo

touch .env

MONGODB_URI=<Your Connection URI>

mkdir -p src/libtouch src/lib/db.ts

import { MongoClient } from "mongodb"
// Connection string from the MongoDB atlas dashboardconst uri = process.env.MONGODB_URI
let connected = falselet client: MongoClient
export async function connectToDatabase() {    if (!uri) {        throw new Error("MONGODB_URI is not defined in environment variables")    }
    if (!connected) {        try {            client = new MongoClient(uri)            await client.connect()            connected = true        } catch (error) {            throw new Error(`Failed to connect to database: ${error instanceof Error ? error.message : 'Unknown error'}`)        }    }    return client.db("sample_restaurants")}

mkdir -p src/servertouch src/server/restaurants.ts

import { createServerFn } from "@tanstack/react-start"import { connectToDatabase } from "../lib/db"


export interface Restaurant {    _id: string    address: {        building: string        coord: [number, number]        street: string        zipcode: string    }    borough: string    cuisine: string    name: string    restaurant_id: string}

// Gets a list of all restaurants from the databaseexport const getAllRestaurants = createServerFn({ method: 'GET'}).handler(async () => {        const db = await connectToDatabase()        const restaurants = await db            .collection<Restaurant>("restaurants")            .find({})            .limit(100)            .toArray()         return restaurants.map((restaurant) => ({            ...restaurant,            _id: restaurant._id.toString(),    }))})  
// Gets a list of restaurants in Queens with "Moon" in the nameexport const getRestaurantsByBorough = createServerFn({ method:  'GET'}).handler(async () => {    const db = await connectToDatabase()    const restaurants = await db        .collection<Restaurant>("restaurants")        .find({             borough: 'Queens',            name: {$regex: 'Moon', $options: 'i'} // case-insensitive match        })        .limit(100)        .toArray()    // Convert ObjectId to string for client-side serialization         return restaurants.map((restaurant) => ({        ...restaurant,        _id: restaurant._id.toString(),    }))    })

import { Link } from "@tanstack/react-router"
export function Header() {    return(        <>            <nav className="bg-white px-6 py-2 shadow-md">                <div className="flex justify-between items-center gap-8">                    <Link to ="/">                        <img                             alt="MongoDB logo"                             className="h-10 inline"                             src="https://d3cy9zhslanhfa.cloudfront.net/media/3800C044-6298-4575-A05D5C6B7623EE37/4B45D0EC-3482-4759-82DA37D8EA07D229/webimage-8A27671A-8A53-45DC-89D7BF8537F15A0D.png"                            width="120"                            height="40"                            loading="eager"                            style={{ maxHeight: '2.5rem', width: 'auto' }}                        />                    </Link>                    <Link to ="/browse" className="text-lime-800 text-lg font-semibold hover:text-green-700">                        Browse                    </Link>                </div>            </nav>        </>    )}

touch src/components/RestaurantList.tsx

import {Restaurant} from "../server/restaurants"
type Props = {    restaurants: Restaurant[]}
export function RestaurantList({restaurants}: Props) {    return (        <div className="overflow-hidden rounded-lg border border-gray-200 shadow-md">            <table className="w-full">                <thead className="bg-gray-50">                    <tr>                        <th className="px-4 py-3 text-left text-sm font-bold text-gray-700">Name</th>                        <th className="px-4 py-3 text-left text-sm font-bold text-gray-700">Borough</th>                        <th className="px-4 py-3 text-left text-sm font-bold text-gray-700">Cuisine</th>                    </tr>                </thead>                <tbody className="divide-y divide-gray-200">                    {restaurants.map((restaurant) => (                        <tr key={restaurant._id}>                            <td className="px-4 py-3">{restaurant.name}</td>                            <td className="px-4 py-3">{restaurant.borough}</td>                            <td className="px-4 py-3">{restaurant.cuisine}</td>                        </tr>                    ))}                </tbody>            </table>        </div>       )}

import { HeadContent, Scripts, createRootRoute, Outlet } from '@tanstack/react-router'import { QueryClient, QueryClientProvider } from '@tanstack/react-query'import '../styles.css'  import {Header} from '../components/Header'
//Configure TanStack Query Client with cache and retry optionsconst queryClient = new QueryClient({    defaultOptions: {        queries: {        staleTime: 60 * 1000, // Data stays fresh for one minute        retry: 1, // Retry failed requests once        retryDelay: 1000 // Wait one second before retrying        },    },})
export const Route = createRootRoute({    component: () => (        <html lang="en">        <head>            <HeadContent />        </head>        <body>            <QueryClientProvider client={queryClient}>            <Header />            <main>                <Outlet />            </main>            </QueryClientProvider>            <Scripts />        </body>        </html>    ),    // Handle 404 errors for non-existent routes    notFoundComponent: () => {        return (        <div className="p-6">            <h1 className="text-2xl font-bold">404 - Page Not Found</h1>            <p>The page you're looking for doesn't exist.</p>        </div>        )    }})

import { createFileRoute } from "@tanstack/react-router";import {useSuspenseQuery} from '@tanstack/react-query'import { RestaurantList } from "../components/RestaurantList";import { getAllRestaurants } from "../server/restaurants";
export const Route = createFileRoute('/')({    component: Home,    pendingComponent: () => (        <div className="p-6 text-gray-500">            Loading restaurants...        </div>    ),    errorComponent: ({error}) => (        <div className="p-6 text-red-600">            <h2 className="text-xl font-bold">Connection Error</h2>            <p>{error.message}</p>            <p className="text-sm mt-2">Please check your MongoDB connection string in your .env file</p>        </div>    ),})
function Home() {    const{data: restaurants} = useSuspenseQuery({        queryKey:['restaurants'],        queryFn: () => getAllRestaurants(),    })    return (        <div className="w-full p-6">            <h2 className="text-lg font-semibold p-4">All Restaurants</h2>            <RestaurantList restaurants={restaurants} />        </div>    )}

touch src/routes/browse.tsx

import { createFileRoute } from '@tanstack/react-router'import { useSuspenseQuery } from '@tanstack/react-query'import { RestaurantList } from '../components/RestaurantList'import { getRestaurantsByBorough } from '../server/restaurants'
export const Route = createFileRoute('/browse')({    component: BrowsePage,    // Display error UI if MongoDB connection or query fails    errorComponent: ({ error }) => (        <div className="p-6 text-red-600">            <h2 className="text-xl font-bold">Connection Error</h2>            <p>{error.message}</p>            <p className="text-sm mt-2">                Please check your MongoDB connection string in your .env file            </p>        </div>    ),})
function BrowsePage() {    // Fetch filtered restaurants using TanStack Query    // Query includes borough and search term in the key for proper caching    const { data: restaurants } = useSuspenseQuery({        queryKey: ['restaurants', 'queens', 'moon'], // Unique cache key for this filtered query        queryFn: () => getRestaurantsByBorough(), // Server function with MongoDB filter    })
    return (        <div className='w-full p-6'>            <h2 className='text-lg font-semibold p-4'>                Queens Restaurants with "Moon" in the Name            </h2>            <RestaurantList restaurants={restaurants} />        </div>    )}

your-app/├─ node_modules/├─ public/├─ src/│  ├─ components/│  │  ├─ Header.tsx <-- Logo and browse link│  │  ├─ RestaurantList.tsx <-- Table that displays results of DB query│  ├─ routes/│  │  ├─ __root.tsx <-- Application wrapper│  │  ├─ browse.tsx <-- Browse page, holds results of getRestaurantsByBorough()│  │  ├─ index.tsx <-- Home page, holds results of getAllRestaurants()│  ├─ server/│  │  ├─ restaurants.ts <--- Server functions│  ├─ lib/│  │  ├─ db.ts <--- Database connection├─ .env <-- Connection URI

npm run dev

VITE v7.2.4  ready in 939 ms
➜  Local:   http://localhost:3000/➜  Network: use --host to expose➜  press h + enter to show help