Data Fetching

Introduction

Learn how to implement data fetching strategies for REST, GraphQL, or custom APIs with reactive state management.

Core Concepts

Caching

Leverage built-in caching mechanisms to reduce redundant API calls and improve performance.

Pagination

Implement seamless pagination workflows with load more and infinite scroll capabilities.

Resilience

Configure retry strategies with exponential backoff for failed API requests.

Streaming

Implement real-time data updates with server-sent events and reactive streaming.

Example Implementation

Fetch Paginated Data

JavaScript


const fetchData = async (page) => {
    try {
        const response = await eseniia.api.get(`/data?page=${page}`);
        
        return {
            data: eseniia.cache.getOrSet(`page-${page}`, response.data, {
                duration: 60000, // 1 minute caching
                strategy: 'stale-while-revalidate'
            }),
            hasMore: response.headers.get('x-has-more') === 'true'
        };
    } catch (error) {
        eseniia.metrics.logError(error);
        throw eseniia.util.formatApiError(error);
    }
}

This implementation includes:

Integrated caching mechanism
Error handling with monitoring
Header-based pagination control
Response formatting and normalization

Best Practices

Optimistic Updates

Update UI before confirmation with rollback capability

Web Worker Support

Offload heavy computations to background threads

Conflict Resolution

Implement optimistic concurrency control patterns

Code Patterns

Reusable implementations for common data loading scenarios.

Real-time

Stream Updates



const liveData = await eseniia.sse.open('updates')// Open server event stream

liveData.onEvent('update', (data) => {

  // Update local state

  store.patch(data)

});// Auto-close on error



                
                
                    
                        Pagination
                        Load More Pattern
                    
                    


const loadNextData = async(currentScroll) => {

  const { data, hasMore } = await fetchData(currentScroll || 0);

  
  if (hasMore) {

    // Append results without replacing current state

    return updateStore(state =>({...state, items: [...state.items, ...data]})

  }
}