@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(() => {
      console.log(data);
    });

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' }
}