React API

// App.tsx
import { ValetProvider, useQuery, useMutation } from './_generated/valet/react'
import { api } from './_generated/valet/api'

function App() {
    return (
        <ValetProvider url="https://your-project.fly.valet.host">
            <TodoList />
        </ValetProvider>
    )
}

function TodoList() {
    const { data: todos } = useQuery(api.todos.list, {})
    const createTodo = useMutation(api.todos.create)

    return (
        <div>
            {todos?.map((todo) => <div key={todo._id}>{todo.title}</div>)}
            <button onClick={() => createTodo.mutate({ title: 'New todo' })}>
                Add
            </button>
        </div>
    )
}

// App.tsx
import { ValetProvider } from './_generated/valet/react'

function App() {
    return (
        <ValetProvider url="https://your-project.fly.valet.host">
            <MyApp />
        </ValetProvider>
    )
}

// lib/valet.ts
import { createValetProvider } from 'valet-dev/react'
import schema from '../valet/_generated/schema.json'
import handlers from '../valet/_generated/handlers'

const {
    ValetProvider,
    useQuery,
    useMutation,
    useOptimisticMutation,
    useFetchQuery,
    fetchQuery,
    useValetClient,
    useConnectionState,
    useIsConnected,
    useIsReconnecting,
    usePendingMutationCount,
    useOfflineMode,
    useValetAuth,
} = createValetProvider({
    schema,
    handlers,
})

// components/TodoList.tsx
import { useQuery } from './_generated/valet/react'
import { api } from './_generated/valet/api'

function TodoList() {
    const { data, isLoading, error } = useQuery(api.todos.list, { completed: false })

    if (isLoading) return <div>Loading...</div>
    if (error) return <div>Error: {error}</div>

    return (
        <ul>
            {data?.map((todo) => <li key={todo._id}>{todo.title}</li>)}
        </ul>
    )
}

function useQuery<Args, Returns>(
    query: QueryReference<Args, Returns>,
    args: Args,
    options?: UseQueryOptions
): UseQueryResult<Returns>

// components/CreateTodo.tsx
import { useMutation } from './_generated/valet/react'
import { api } from './_generated/valet/api'

function CreateTodo() {
    const { mutate, isLoading, error } = useMutation(api.todos.create, {
        onSuccess: (result) => {
            console.log('Created:', result)
        },
        onError: (err) => {
            console.error('Failed:', err)
        },
    })

    return (
        <button
            disabled={isLoading}
            onClick={() => mutate({ title: 'New todo' })}
        >
            Add Todo
        </button>
    )
}

function useMutation<Args, Returns>(
    mutation: MutationReference<Args, Returns>,
    options?: UseMutationOptions<Args, Returns>
): UseMutationResult<Args, Returns>

// components/ToggleTodo.tsx
import { useOptimisticMutation, useQuery } from './_generated/valet/react'
import { api } from './_generated/valet/api'

function ToggleTodo({ todoId }: { todoId: string }) {
    const { data: todos } = useQuery(api.todos.list, {})
    const toggle = useOptimisticMutation(api.todos.update, {
        queryKey: { fn: 'todos.list', args: {} },
        optimisticUpdate: (currentData, args) => {
            return currentData.map((todo) =>
                todo._id === args.id
                    ? { ...todo, completed: !todo.completed }
                    : todo
            )
        },
        rollback: (currentData, error, args) => {
            return currentData.map((todo) =>
                todo._id === args.id
                    ? { ...todo, completed: !todo.completed }
                    : todo
            )
        },
    })

    const todo = todos?.find((t) => t._id === todoId)
    if (!todo) return null

    return (
        <button onClick={() => toggle.mutate({ id: todoId, completed: !todo.completed })}>
            {todo.completed ? 'Undo' : 'Done'}
        </button>
    )
}

function useOptimisticMutation<Args, Returns, QueryData>(
    mutation: MutationReference<Args, Returns>,
    options: UseOptimisticMutationOptions<Args, Returns, QueryData>
): UseMutationResult<Args, Returns>

// components/SearchResults.tsx
import { useFetchQuery } from './_generated/valet/react'
import { api } from './_generated/valet/api'

function SearchButton() {
    const fetchResults = useFetchQuery(api.search.run)

    const handleSearch = async () => {
        const results = await fetchResults({ query: 'hello' })
        console.log('Results:', results)
    }

    return <button onClick={handleSearch}>Search</button>
}

function useFetchQuery<Args, Returns>(
    query: QueryReference<Args, Returns>
): (args: Args) => Promise<Returns>

// lib/prefetch.ts
import { fetchQuery } from 'valet-dev/react'
import { api } from './_generated/valet/api'
import type { ValetClient } from 'valet-dev/react'

async function prefetchTodos(client: ValetClient) {
    const todos = await fetchQuery(client, api.todos.list, {})
    return todos
}

function fetchQuery<Args, Returns>(
    client: ValetClient,
    query: QueryReference<Args, Returns>,
    args: Args
): Promise<Returns>

// components/Debug.tsx
import { useValetClient } from './_generated/valet/react'

function DebugPanel() {
    const client = useValetClient()

    return <pre>{JSON.stringify(client.connectionState, null, 2)}</pre>
}

function useValetClient(): ValetClient

// components/StatusBar.tsx
import { useConnectionState } from './_generated/valet/react'

function StatusBar() {
    const state = useConnectionState()

    return <div>Status: {state}</div>
}

function useConnectionState(): ConnectionState

// components/SaveButton.tsx
import { useIsConnected } from './_generated/valet/react'

function SaveButton() {
    const isConnected = useIsConnected()

    return (
        <button disabled={!isConnected}>
            {isConnected ? 'Save' : 'Offline'}
        </button>
    )
}

function useIsConnected(): boolean

// components/ReconnectBanner.tsx
import { useIsReconnecting } from './_generated/valet/react'

function ReconnectBanner() {
    const isReconnecting = useIsReconnecting()

    if (!isReconnecting) return null
    return <div>Reconnecting...</div>
}

function useIsReconnecting(): boolean

// components/SyncIndicator.tsx
import { usePendingMutationCount } from './_generated/valet/react'

function SyncIndicator() {
    const count = usePendingMutationCount()

    if (count === 0) return <span>Synced</span>
    return <span>Syncing ({count} pending)...</span>
}

function usePendingMutationCount(): number

// components/OfflineToggle.tsx
import { useOfflineMode } from './_generated/valet/react'

function OfflineToggle() {
    const [isOffline, setOfflineMode] = useOfflineMode()

    return (
        <button onClick={() => setOfflineMode(!isOffline)}>
            {isOffline ? 'Go Online' : 'Go Offline'}
        </button>
    )
}

function useOfflineMode(): readonly [isOffline: boolean, setOfflineMode: (offline: boolean) => void]

// components/AuthGate.tsx
import { useValetAuth } from './_generated/valet/react'

function AuthGate({ children }: { children: React.ReactNode }) {
    const { isAuthenticated, isPending, userId, setToken, clearAuth } = useValetAuth()

    if (isPending) return <div>Authenticating...</div>

    if (!isAuthenticated) {
        return <button onClick={() => setToken('jwt-token-here')}>Log In</button>
    }

    return (
        <div>
            <p>User: {userId}</p>
            <button onClick={clearAuth}>Log Out</button>
            {children}
        </div>
    )
}

function useValetAuth(): UseValetAuthResult