BestDay Fetching library

Usage no npm install needed!

<script type="module">
  import aReactKitFetching from 'https://cdn.skypack.dev/@a-react-kit/fetching';


Simple fetching library that use hooks to fetch data.

Short example of use

import { useFetch } from '@skeletor/fetching';

const action = {
    endpoint: '/list',
    method: 'GET'

export const ListContainer = () => {
    const [sendRequest, isPending, source, reset] = useFetch(action);

    return <List isLoading={isPending} returned={source} fetch={()=> sendRequest()} clear={()=> reset()} />

queryFetch method

queryFetch method is used for fetch resources asynchronously across the network. This method can optionally accept a second parameter, an Action object that allows you to control a number of different settings.

  import { queryFetch } from '@skeletor/fetching';

  async const postData(url = '', data = {}){
    // The first parameter requires an url or direct Action object.
    // The second parameter, it's optional and receive an Action object for have a specific configuration.
    const response = await queryFetch(url, {
      method: 'POST',

    return response;

  postData('https://domain.com/test', { role: 'tester' })
    .then(() => {

useFetch Hook

This hook is used to fetch data, and provides the control (for send and reset).

   const [sendRequest, isPending, source, reset] = useFetch(action, fieldValues)
  • action [Action] parameter provides the action with the request configuration and more.
  • fieldValues [Array] parameter shares the field values, use for fill the request payload.

returned parameters

  • [sendRequest] (function, control) sends the request to the server.
    • sendRequest is function that accepts as first parameter 'skipCache' (boolean), allows skip cache function for send the request direct to server. Example: sendRequest(false)
  • [isPending] (boolean, state) indicates whether the request is pending.
  • [source] (Response object, state) returns the Response object.
  • [reset] (function, control) restores the initial state.

Action object

Object with the request configuration.

  // `endpoint` is the server URL that will be used for the request
  endpoint: '/list',
  // `method` is the request method to be used when making the request
  method: 'POST',
  // `body` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  body: { role : 'Tester' },
  // `headers` are custom headers to be sent
  headers: { 'X-Requested-With': 'XMLHttpRequest' };
  // `config` is the internal configuration previos and after to send the request
  config: {
    // `skipCache` by default value is 'false', this meaning that will save in cache the last response for every once action.
    // If is 'true' value will to send request to the endpoint every once without save the response in cache.
    skipCache: false,
    // `parameters` this map specifies the parameters that will be added to the body request. Using the same key of this map for the
    // payload request, and the value of this map defined the key element from 'fieldValues' map will be used for getting the value.
    // Only applicable when the body is not defined.
    parameters: { name : 'fieldValue1' },
    // `emitErrorForStatus` defines the response status numbers that will emit error.
    emitErrorForStatus: [500, 404]
  // `responseType` indicates the type of data that the server will response with
  // options are: 'json' | 'text' | 'blob'
  responseType: 'json'

Response object

  // `status` is the status HTTP response code
  status: 200,
  // `error` indicates whether the response was unexpected or has catched an error
  error: false,
  // `errorObject` is the error object catched in exeception handling 
  errorObject: null;
  // `payload` is the response data from server
  payload: {
      list : [
          { role : 'tester' }
  // `headers` are the response headers
  headers: { 'Content-Type' : 'application/json; charset=utf8' }