Cyl-react-hooks-api NPM

React.JS api utils Hooks

This is a set of api management methods based on the React context,Remember to use the latest version, do not use other versions

Install

npm install --save cyl-react-hooks-api

Or:

yarn add cyl-react-hooks-api

Or:

pnpm add cyl-react-hooks-api

prefix

`ApiProvider`

ApiProvider Component must be used at the entry and exit of all components in order to ensure that the various page types are working correctly. If you still don't understand, please learn Use of the React Context

case

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {ApiProvider} from "cyl-react-hooks-api"
/**
 * @tip It doesn't have to be axios, it just needs to be any object that implements get, post, delete, put
 */
import axios from "axios"

ReactDOM.render(
    <React.StrictMode>
        <ApiProvider httpClient={axios}>
            <App />
        </ApiProvider>
    </React.StrictMode>,
    document.getElementById('root')
)

Hooks

`useApi`

This hooks user gets the context and has 2 generics

T  The ApiProvider enters the 'httpClient' type passed in by this component  

A   The auth type of the user

case

import axios,{AxiosStatic} from "axios"
import {useApi} from "cyl-react-hooks-api"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    return <div>I am a component</div>
}

`useApiState`

This is which is used to request an interface and get the result returned by the interface, the status of the request procedure, and the error of the request

case

`test.ts`
import axios,{AxiosStatic} from "axios"
import {useApi,useApiState,Context} from "cyl-react-hooks-api"
interface Auth {
    name:string
    pass:string
}
interface Test {
    id:number
    name:string
}
export function getTest(ctx:Context<AxiosStatic,Auth>,id:number):Promise<Test>{
    return ctx.get("/test",{
        param:{
            id
        }
    })
}

import axios,{AxiosStatic} from "axios"
import {useApi,useApiState} from "cyl-react-hooks-api"
import {getTest} from "./test.ts"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    const [id,setId] = useState(0)
    const [test,loading,error] = useApiState(api,getTest,id)
    return <div>
        <div>state:{loading ? "loading" : "Request is completed"}</div>
        <div>err:{error ? error?.message : "There is no error"}</div>
        <div>results:{JSON.stringify(test)}</div>
    </div>
}

`useApiAnyError`

Remember that it is a component

hooks user which specifies that all errors of a component are caught by which all requests of a component are incorrect.

case

import axios,{AxiosStatic} from "axios"
import {useApi,useApiState,useApiAnyError} from "cyl-react-hooks-api"
import {getTest} from "./test.ts"
import {getapp} from "./app.ts"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    const [id,setId] = useState(0)
    const [test] = useApiState(api,getTest,id)
    const [app] = useApiState(api,getapp,id)
    const anyError = useApiAnyError(api)
    return <div>
        <div>err:{anyError ? anyError?.message : "There is no error"}</div>
        <div>results:{JSON.stringify(test)}</div>
    </div>
}

`useApiAnyLoading`

Remember that it is a component

hooks user which specifies the state of all requests for a component. That is, if only one of a component's requests is not completed, it is still in the request.

case

import axios,{AxiosStatic} from "axios"
import {useApi,useApiState,useApiAnyLoading} from "cyl-react-hooks-api"
import {getTest} from "./test.ts"
import {getapp} from "./app.ts"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    const [id,setId] = useState(0)
    const [test] = useApiState(api,getTest,id)
    const [app] = useApiState(api,getapp,id)
    const AnyLoading = useApiAnyLoading(api)
    return <div>
        <div>state:{AnyLoading ? "loading" : "Request is completed"}</div>
        <div>results:{JSON.stringify(test)}</div>
    </div>
}

`useCoEffect`

Similar to the useEffect, a Generator function callback can be accepted,

The callback function can yield Promise in the same way as the async function with await Promise

When deps changes or Component is uninstalled,

Execution of this Generator function interrupts at the current yield location.

An interrupt does not execute the next statement or throw an exception,

But the finally block is still executed after the interrupt.

The callback can be checked using isCancelled in the finally block

Whether the current execution process is canceled

case

import axios,{AxiosStatic} from "axios"
import {useApi,useCoEffect} from "cyl-react-hooks-api"
import {getTest} from "./test.ts"
import {getapp} from "./app.ts"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    const [appId,setAppId] = useState(0)
    const [testId,setTestId] = useState(0)
    useCoEffect(function *(){
        yield getapp(api,appId)
        yield getTest(api,testId)
        console.log("The request is completed")
    },[])
    return <div>
        useCoEffect
    </div>
}

`useCoCallback`

Similar to useCallback, a Generator function callback can be accepted,

The callback function can yield Promise in the same way as the async function with await Promise

When deps changes or Component is uninstalled,

Execution of this Generator function interrupts at the current yield location.

An interrupt does not execute the next statement or throw an exception,

But the finally block is still executed after the interrupt.

The callback can be checked using isCancelled in the finally block

Whether the current execution process is canceled

case

import axios,{AxiosStatic} from "axios"
import {useApi,useCoCallback,useApiState} from "cyl-react-hooks-api"
import {getTest} from "./test.ts"
import {getApp} from "./app.ts"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    const [testId,setTestId] = useState(0)
    const [test,loading,error] = useApiState(api,getTest,testId)
    const onChangeTest = useCoCallback(function *(){
        const i = yield getApp()
        setTestId(i)
    },[testId])
    return <div>
        <div>state:{loading ? "loading" : "Request is completed"}</div>
        <div>err:{error ? error?.message : "There is no error"}</div>
        <div>results:{JSON.stringify(test)}</div>
        <button onclick={onChangeTest}>update</button>
    </div>
}

`useApiCollectionFetcher`

Request another interface from a unique field in the data returned by the previous useApiState (must be an array)

case

import axios,{AxiosStatic} from "axios"
import {useApi,useApiCollectionFetcher,useApiState} from "cyl-react-hooks-api"
import {getTests} from "./test.ts"
import {getAppByTestId} from "./app.ts"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    const [testId,setTestId] = useState(0)
    const [tests] = useApiState(api,getTests)
    const [apps,loading,error] =useApiCollectionFetcher(api,tests,t=>t?.id,getAppByTestId)
    return <div>
        <div>state:{loading ? "loading" : "Request is completed"}</div>
        <div>err:{error ? error?.message : "There is no error"}</div>
        <div>results:{JSON.stringify(apps)}</div>
        <button onclick={onChangeTest}>update</button>
    </div>
}

`useCollector`

Retrieves a field in the data (must be an ARRAY object) and returns it as an array

case

import axios,{AxiosStatic} from "axios"
import {useApi,useCollector,useApiState} from "cyl-react-hooks-api"
import {getTests} from "./test.ts"
import {getAppByTestId} from "./app.ts"
interface Auth {
    name:string
    pass:string
}
export default function Component(){
    const api = useApi<AxiosStatic,Auth>()
    const [testId,setTestId] = useState(0)
    const [tests,loading,error] = useApiState(api,getTests)
    const testIds = useCollector(tests,t=>t?.id)
    return <div>
        <div>state:{loading ? "loading" : "Request is completed"}</div>
        <div>err:{error ? error?.message : "There is no error"}</div>
        <div>results :{JSON.stringify(testIds)}</div>
        <button onclick={onChangeTest}>update</button>
    </div>
}