woowa-utils

Modules below are written by Typescript.

fetchWrapper

Description

: FetchWrapper helps you easily make XHR requests using fetch API like axios

How to use

1. install

   npm i woowa-utils
   

2. import fetchWrapper

   import { fetchWrapper } from 'fetchWrapper'
   

3. give parameters that fetchWrapper needs

   1. type of input and output

   2. method

      • you can use five HTTP method type
        • GET
        • POST
        • DELETE
        • PATCH
        • PUT

   3. url

   4. body(optional)

   here we'll give you some examples that might help you

   If you make GET request, you can use fetchWrapper as below

        // define type of input
        export interface ITransactionResponse {
          id: number
          content: string
          price: number
          paymentName: string
          categoryName: string
          createdAt: Date
        }
        
        const TRANSACTION = 'http:localhost:3000/api/transaction'
        
        export const fetchAllTransaction = async () => {
          // define type of input and output
          // if there is no output, make it 'undefined'
          return await fetchWrapper<ITransactionResponse[], undefined>(
            // define method
            'GET',
            // define url
            TRANSACTION
           // if there is no body, leave blank 
          )
        }
   

   If you're making POST request, you can use fetchWrapper as below

   // define input
   export interface ITransactionResponse {
     id: number
     content: string
     price: number
     paymentName: string
     categoryName: string
     createdAt: Date
   }
   
   // define output
   export interface ICreateTransaction {
     content: string
     price: number
     paymentId: number
     userId: number
     categoryId: number
   }
   
   const TRANSACTION = 'http:localhost:3000/api/transaction'
   
   export const createNewTransaction = async (args: ICreateTransaction) => {
    // input type should be ITransactionResponse
     // output type should be ICreateTransaction
     return await fetchWrapper<ITransactionResponse[], ICreateTransaction>(
       // define method
       'POST',
       // define url
       TRANSACTION,
       // define body(optional)
       args
     )
   }
   

   As fetchWrapper pass result when promise is resolve using async/await pattern, function that uses fetchWrapper can just use the data llik the one that synchronous function returns.

   However , It is important to notice that fetchWrapper returns array in which first element is response and the second one is error.

   Therefore, you have to use api function that uses fetchWrapper like below

   const [result, err] = await createNewTransaction(body)
   

   You can continue the logic using result and err.

   Thank you.

   Github