Code Examples & Patterns

class APIClient {
  constructor(baseURL, options = {}) {
    this.baseURL = baseURL;
    this.retries = options.retries ?? 3;
    this.delay = options.delay ?? 1000;
    this.timeout = options.timeout ?? 8000;
  }

  async request(endpoint, config = {}) {
    const url = `${this.baseURL}${endpoint}`;
    
    for (let attempt = 1; attempt <= this.retries; attempt++) {
      try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), this.timeout);

        const response = await fetch(url, {
          ...config,
          signal: controller.signal
        });

        clearTimeout(timeoutId);

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        return data;
      } catch (err) {
        if (attempt === this.retries) throw err;
        await new Promise(res => setTimeout(res, this.delay * attempt));
      }
    }
  }
}

// Usage:
const client = new APIClient('https://api.thatisaq.com');
const users = await client.request('/v1/users', {
  headers: { 'Authorization': 'Bearer token' }
});

import { useState, useEffect, useCallback } from 'react';

const useQuery = (key, fetchFn, { staleTime = 5000, onSuccess } = {}) => {
  const [state, setState] = useState({ data: null, loading: true, error: null });
  const [cache, setCache] = useState({});

  const fetchData = useCallback(async () => {
    const now = Date.now();
    const cached = cache[key];
    
    if (cached && now - cached.timestamp < staleTime) {
      setState(prev => ({ ...prev, loading: false }));
      onSuccess?.(cached.data);
      return cached.data;
    }

    setState(prev => ({ ...prev, loading: true, error: null }));
    
    try {
      const data = await fetchFn();
      setCache(prev => ({ ...prev, [key]: { data, timestamp: now } }));
      setState({ data, loading: false, error: null });
      onSuccess?.(data);
      return data;
    } catch (err) {
      setState({ data: null, loading: false, error: err });
      throw err;
    }
  }, [key, fetchFn, staleTime, onSuccess, cache]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { ...state, refetch: fetchData };
};

export default useQuery;