Integrate MongoDB with TanStack Start

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

import { MongoClient } from "mongodb"
// Connection string from the MongoDB atlas dashboard
const uri = process.env.MONGODB_URI
let connected = false
let 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")
}

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 database
export 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 name
export 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>
        </>
    )
}

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 options
const 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>
    )
}

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>
    )
}