shifath-data-fetching v1.0.0

Shifath Data Fetching

A framework-agnostic data fetching system with first-class React/Next.js support. This package provides a clean, type-safe way to handle data fetching in both client and server environments.

Features

• 🔄 Framework-agnostic core with React/Next.js bindings
• 🎯 Type-safe data fetching with TypeScript
• ⚡ Server-side rendering (SSR) support
• 🔍 Automatic error handling
• 📊 Loading state management
• 🔄 Built-in refetch capability
• 📝 Extensive TypeScript support

Installation

npm install shifath-data-fetching
# or
yarn add shifath-data-fetching

Quick Start

1. Define Your Data Type

interface User {
  id: number;
  name: string;
  email: string;
}

2. Create Your Component

import { WithDataProps } from 'shifath-data-fetching';

interface UserComponentProps extends WithDataProps<User> {
  title?: string;
}

const UserComponent: React.FC<UserComponentProps> = ({ 
  data, 
  isLoading, 
  error, 
  refetch 
}) => {
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>No data</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
};

3. Use with Client-Side Fetching

import { withClientFetching } from 'shifath-data-fetching';

const UserWithFetching = withClientFetching<User, UserComponentProps>(
  UserComponent,
  'userFetcher'
);

// Use in your app
<UserWithFetching 
  url="/api/users/123"
  options={{ 
    headers: { 
      'Authorization': 'Bearer token' 
    } 
  }}
/>

4. Use with Server-Side Fetching (Next.js)

import { withServerFetching } from 'shifath-data-fetching';

const UserWithServerFetching = withServerFetching<User, UserComponentProps>(
  UserComponent,
  'userFetcher'
);

// Use in your Next.js page
const Page = async () => {
  return (
    <UserWithServerFetching 
      url="/api/users/123"
      options={{ 
        headers: { 
          'Authorization': 'Bearer token' 
        } 
      }}
    />
  );
};

API Reference

Core Types

WithDataProps<T>

Props interface that your components should extend:

interface WithDataProps<T> {
  data?: T;
  isLoading: boolean;
  error?: FetchError;
  refetch?: () => Promise<void>;
}

FetchOptions

Extended fetch options:

interface FetchOptions extends RequestInit {
  timeout?: number;
  retries?: number;
}

FetcherConfig

Configuration for fetchers:

interface FetcherConfig {
  baseURL?: string;
  defaultOptions?: FetchOptions;
  errorHandler?: (error: FetchError) => void;
  responseInterceptor?: <T>(response: FetchResponse<T>) => FetchResponse<T> | Promise<FetchResponse<T>>;
}

HOCs

withClientFetching

function withClientFetching<T, P extends WithDataProps<T>>(
  WrappedComponent: React.ComponentType<P>,
  fetcherKey: string
): React.ComponentType<Omit<P, keyof WithDataProps<T>> & WithFetchingProps>

withServerFetching

function withServerFetching<T, P extends WithDataProps<T>>(
  WrappedComponent: React.ComponentType<P>,
  fetcherKey: string
): (props: Omit<P, keyof WithDataProps<T>> & WithFetchingProps) => Promise<React.ReactElement>

Examples

Check the examples directory for more detailed usage examples:

• Basic Usage
• Error Handling
• Custom Fetcher Implementation
• Server-Side Rendering
• TypeScript Integration

Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the ISC License - see the LICENSE file for details.