@vab-8350/usefetch NPM

useFetch

Description

This project arose with the idea of simplifying the calls to an API, I use the axios library and it is mainly intended to be used in React, since it is used as a hook, avoiding having too many getExample.service.js or similar files.

Install

npm i @vab-8350/usefetch

Example

I recommend using the initial configuration from an external config.js file so that we don't repeat this configuration every time you want to use it.

config.js

const config = {
  headerOptions: {
    baseURL: 'https://jsonplaceholder.typicode.com',
    headers: {
      'Content-Type': 'application/json; charset=UTF-8',
      'Access-Control-Allow-Origin': '*'
    }
  }
}

export default config

Then, in the component that we need to query, we can use it this way...

exampleComponent.jsx

import { useEffect } from 'react'
import useFetch from '@vab-8350/usefetch'

import config from './config.js'

function exampleComponent() {

  const {GET, POST, PATCH, DELETE} = useFetch(config.fetchHeader)

  useEffect(() => {

    getInfo()

  }, [])

  const getInfo = async() => {

    const {data, status} = await GET('/users')
    console.log(data)
    console.log(status)

  }

  return (
    <div>
      example
    </div>
  )
}

export default exampleComponent