useAjax

This is a hook to make Ajax requests, which helps reduce boilerplate in your code. The actual fetch is done via axios.

Usage

The hook is configured with an options object. This is an extension of the default axios request config with some optional success / error handlers. See the reference below.

The hook returns a tuple comprising a function, and an object with some useful properties. The function makes the actual request, and takes an optional override argument. The argument can be an object, which is merged in with the initial config, or a function, which is passed the initial config as an argument. The return value of the override function is by default merged in with the initial config. If you do not wish either form to be merged with the initial config, pass false as the second argument to the function.

const YourComponent = () => {
  const [list, { calls, loading, data: things }] = useAjax({
    url: "localhost:3000/api/something",
    initial: [],
  });

  const [doSomeUpdate, { loading: updateLoading, data: updated }] = useAjax({
    url: "localhost:3000/api/something/1",
    method: "PATCH",
    data: [1, 2, 3],
  });

  return (
    <div>
      <button onClick={() => list()}>Fetch!</button>
      <button onClick={() => doSomeUpdate({ data: [3, 6, 9] })}>
        Update something
      </button>
      <p>{things.join(", ")}</p>
      <p>Last updated thing: {updated}</p>
      {updateLoading && <p>Updating...</p>}
      {loading && <p>Loading...</p>}
      <p>
        Called {calls} {calls === 1 ? "time" : "times"}
      </p>
    </div>
  );
};

Reference

const options = {
  onSuccess: (resp) => console.log("success:", resp.data),
  onError: (resp) => console.log("error:", resp),
  data: { key: "value" }
  initial: []
}

• onSuccess?: () => void | string - optional callback invoked when response made successfully; if it has a return value, then that will be the success message (takes precedence over successMessage)
• onError?: () => void | string - optional callback invoked when response errors; if it has a return value, that will be used as the error message (takes precedence over errorMessage)
• initial?: T - this defaults to null but useful for setting an initial value before the first fetch is done
• fetchImmediately?: boolean - this fetches on render, defaults to false
• errorMessage?: string - message to show when request fails
• successMessage?: string - message to show when request succeeds
• errorTimeout?: string - Times out error states
• successTimeout?: string - Times out success states

const [handler, { calls, successCalls, errorCalls, loading, data }] = useAjax(
  options
);

• handler(overrideObjectOrFunc, merge: boolean): void - invoke this to make a request;
• calls: number - count of requests;
• successCalls: number - count of successful requests;
• errorCalls: number - count of failed requests;
• loading: boolean - whether response is being waited for;
• fetched: boolean - whether request has been made at all;
• success: boolean - whether last request succeeded;
• error: boolean - whether last request failed;
• successMessage: string - success message generated by onSuccess or successMessage prop after a successful request;
• errorMessage: string - error message generated by onError or errorMessage prop after a failed request;
• data: void - the data from the response;
• clearSuccessCalls: () => void - clear success calls;
• clearErrorCalls: () => void - clear error calls;
• clearCalls: () => void - clear calls;
• clearError: () => void - clears error states;
• clearSuccess: () => void - clears success states;