React-api-client NPM

react-api-client

Install

npm install --save react-api-client

Usage

Define a result type

import { BaseApiResult } from 'react-api-client'

interface ApiResult extends BaseApiResult {
  /* Add custom fields here */
}

Create an api client

import { ApiClient } from 'react-api-client'

const client = new ApiClient<ApiResult>({
  baseUrl: "http://your-server/api", // Your api base url
  responseHandler: (data) => { // Handle an api response
    if (data.error != null) {
      return {
        hasError: true,
        errorMessage: data.error,
        /* Extract additional error information from data here */
      }
    }

    return {
      hasError: false
    }
  },
  errorHandler: (e) => ({ // Handle an error while performing a request
    hasError: true,
    errorMessage: e.message
  }),
  fetchOptions: {
    /* Add extra options for the fetch() method here */
  }
});

Send a request from normal code

result = await client.get("/");
result = await client.post("/", {});

Send a request as a state

function MyComponent() {
  const [
    result,  /* The api result */
    loading, /* Indicates if the request is loading or not */
    reload   /* Call this function to perform the request again */
  ] = client.useGet("/");

  return (
    <span>{loading ? "Loading..." : JSON.stringify(result)}</span>
  );
}

Send a request with a state

function MyComponent() {
  const [
    handle,  /* The request state handle - pass this to all api calls */
    loading, /* Indicates if the request is loading or not */,
    result   /* The request result or null, if there was no result yet */
  ] = client.useRequestState();

  return (
    <div>
      <span>{loading ? "Loading..." : JSON.stringify(result)}</span><br />
      <button onClick={() => client.get("/", handle)}>Send request</button>
    </div>
  );
}

Send a request using a data loader (with inline handler)

function MyComponent() {
  return (
    <client.Loader consumer={true} endpoint="/">
      {(result: ApiResult, reload: ReloadFunction) => (
        <span>{JSON.stringify(result)}</span>
      )}
    </client.Loader>
  )
}

Send a request using a data loader (with context handler)

import { ReloadFunction } from 'react-api-client'

const DataContext = React.createContext("dataContext");

function MyOuterComponent() {
  return (
    <client.Loader consumer={DataContext} endpoint="/">
      <MyComponent />
    </client.Loader>
  )
}

function MyComponent() {
  const [
    result,  /* The api result */
    reload   /* Call this function to perform the request again */
  ] = useContext(DataContext);

  return (<span>{JSON.stringify(result)}</span>);
}