Data Fetching Example

This example is coming soon. We're working on a comprehensive data fetching guide with real API integration patterns.

Learn how to handle asynchronous data fetching, loading states, error handling, and caching with TachUI's reactive system.

Planned Content

This example will demonstrate:

• Async Data Loading - Fetching data from REST APIs
• Loading States - Managing loading, success, and error states
• Error Handling - Graceful error recovery and retry logic
• Data Caching - Efficient caching strategies with signals
• Real-time Updates - WebSocket integration and live data
• Optimistic Updates - Immediate UI updates with rollback
• Pagination - Infinite scroll and traditional pagination

Quick Preview

import { createSignal, createEffect, VStack, Text, Button } from '@tachui/core'

function UserList() {
  const [users, setUsers] = createSignal([])
  const [loading, setLoading] = createSignal(false)
  const [error, setError] = createSignal(null)
  
  const fetchUsers = async () => {
    setLoading(true)
    setError(null)
    
    try {
      const response = await fetch('/api/users')
      const data = await response.json()
      setUsers(data)
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }
  
  // Fetch on component mount
  createEffect(() => {
    fetchUsers()
  })
  
  return VStack({
    children: [
      () => loading() ? Text("Loading users...") : null,
      () => error() ? Text(`Error: ${error()}`).modifier.foregroundColor('red').build() : null,
      () => users().map(user => 
        Text(user.name).modifier.padding(8).backgroundColor('#f5f5f5').build()
      ),
      Button("Refresh", fetchUsers)
    ],
    spacing: 8
  })
}

Current Status

🚧 In Development - This comprehensive data fetching example is being written and will include:

• Real API integration examples
• Advanced loading patterns
• Error boundary integration
• Performance optimization strategies
• TypeScript type safety patterns

Alternative Resources

While we finish this example:

• createEffect API - Side effects for data fetching
• Signals Guide - Managing async state with signals
• Todo Example - Includes localStorage persistence patterns

Planned Examples

REST API Integration

• GET, POST, PUT, DELETE operations
• Authentication and headers
• Response transformation

GraphQL Integration

• Query and mutation patterns
• Apollo Client integration
• Real-time subscriptions

Real-time Data

• WebSocket connections
• Server-sent events
• Live data synchronization

Advanced Patterns

• Optimistic updates
• Background sync
• Offline support

Get Notified

Follow our progress:

• GitHub Issues - Example development tracking
• Developer Quick Start - Includes basic async patterns