JSPM

react-native-advanced-network

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q30117F
  • License MIT

A flexible and extensible React Native networking library built with the decorator pattern

Package Exports

  • react-native-advanced-network
  • react-native-advanced-network/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-advanced-network) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Advanced Network Library

A flexible and extensible React Native networking library built with the decorator pattern. This library provides a robust solution for handling HTTP requests with support for:

  • ๐Ÿ”’ Authentication - Seamless authentication integration
  • ๐Ÿ’พ Caching - Efficient caching for improved performance
  • ๐Ÿ”„ Automatic retries - Configurable retry logic for handling transient failures
  • ๐Ÿ”€ Fallback mechanisms - Fallback support for robust error handling
  • ๐Ÿงช Highly testable - Provided mocks for easy testing

Easily chainable decorators allow you to customize your network stack to fit your specific needs. Built with TypeScript and modern JavaScript, this library offers a modern, efficient approach to networking in React Native applications.

Installation

npm install react-native-advanced-network
# or
yarn add react-native-advanced-network

Quick Start

import { 
  BaseNetworkRequestable, 
  authenticated, 
  cached, 
  retry, 
  fallback, 
  HTTPMethod 
} from 'react-native-advanced-network';

// Create a basic network client
const baseClient = new BaseNetworkRequestable('https://api.example.com');

// Create a client with all decorators
const networkClient = authenticated(
  cached(
    retry(
      fallback(
        baseClient,
        () => new BaseNetworkRequestable('https://fallback-api.example.com')
      )
    )
  ),
  () => 'your-auth-token',
  (endpoint) => endpoint.startsWith('/secure')
);

// Make a request
const getData = async () => {
  try {
    const response = await networkClient.request('/users', HTTPMethod.GET);
    console.log('Response:', response);
  } catch (error) {
    console.error('Error:', error);
  }
};

Core Components

NetworkRequestable Interface

The base interface for all network requests.

interface NetworkRequestable {
  request<T>(
    endpoint: string,
    method: HTTPMethod,
    body?: Record<string, any>,
    responseType?: new () => T,
    headers?: Record<string, string>
  ): Promise<T>;
}

BaseNetworkRequestable

The fundamental implementation of NetworkRequestable.

Decorators

AuthenticatedDecorator

Adds authentication to requests.

function authenticated(
  networkRequestable: NetworkRequestable,
  tokenProvider: () => string | null | undefined,
  needsAuth: (endpoint: string) => boolean,
  headerName: string = 'Authorization'
): NetworkRequestable

CacheDecorator

Implements caching for requests.

function cached(
  networkRequestable: NetworkRequestable,
  cache: Cache = new MemoryCache(),
  ttl: number | null = null,
  cacheMethods: HTTPMethod[] = [HTTPMethod.GET]
): CacheDecorator

RetryDecorator

Adds retry functionality to requests.

function retry(
  networkRequestable: NetworkRequestable,
  options: Partial<RetryOptions> = {}
): NetworkRequestable

FallbackDecorator

Provides a fallback mechanism for failed requests.

function fallback(
  networkRequestable: NetworkRequestable,
  fallbackProvider: () => NetworkRequestable,
  options: Partial<FallbackOptions> = {}
): NetworkRequestable

Usage

Create a network requestable object with desired decorators:

import { 
  createNetworkClient, 
  authenticated, 
  cached, 
  retry, 
  fallback, 
  HTTPMethod, 
  BaseNetworkRequestable 
} from 'react-native-advanced-network';

// Create a base client
const baseClient = createNetworkClient('https://api.example.com');

// Add decorators
const networkClient = baseClient
  .authenticated(
    () => AsyncStorage.getItem('authToken'), 
    (endpoint) => endpoint.includes('secure')
  )
  .cached()
  .retry({ maxAttempts: 3 })
  .fallback(() => createNetworkClient('https://fallback-api.example.com'));

// Make a request
const fetchData = async () => {
  try {
    const result = await networkClient.request(
      '/users',
      HTTPMethod.GET,
      null,
      null,
      { 'Accept-Language': 'en-US' }
    );
    
    console.log('Data:', result);
  } catch (error) {
    console.error('Error:', error);
  }
};

Testing

Use MockNetworkRequestable and MockCache for unit testing:

import { MockNetworkRequestable, HTTPMethod } from 'react-native-advanced-network';

// Create a mock
const mockClient = new MockNetworkRequestable();

// Mock a response
mockClient.mockResponse('/users', HTTPMethod.GET, [{ id: 1, name: 'John' }]);

// Use in your tests
const result = await mockClient.request('/users', HTTPMethod.GET);
// result = [{ id: 1, name: 'John' }]

Error Handling

The library uses a custom NetworkError class for error cases:

enum NetworkErrorType {
  INVALID_URL = 'INVALID_URL',
  NO_DATA = 'NO_DATA',
  DECODING_ERROR = 'DECODING_ERROR',
  HTTP_ERROR = 'HTTP_ERROR',
  UNAUTHORIZED = 'UNAUTHORIZED',
  CUSTOM = 'CUSTOM',
  TIMEOUT = 'TIMEOUT',
  NETWORK_FAILURE = 'NETWORK_FAILURE'
}

Handle these errors appropriately in your application code:

try {
  const result = await networkClient.request('/users', HTTPMethod.GET);
  // Handle successful response
} catch (error) {
  if (error instanceof NetworkError) {
    switch (error.type) {
      case NetworkErrorType.UNAUTHORIZED:
        // Handle unauthorized error
        break;
      case NetworkErrorType.TIMEOUT:
        // Handle timeout error
        break;
      // Handle other error types
    }
  }
}

License

MIT