npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@a-react-kit/fetching

v0.0.6

Published

BestDay Fetching library

Downloads

15

Readme

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