https://github.com/react-rekindle/use-request

🤖React hook for making request.
https://github.com/react-rekindle/use-request

Last synced: about 1 month ago
JSON representation

🤖React hook for making request.

• Host: GitHub
• URL: https://github.com/react-rekindle/use-request
• Owner: react-rekindle
• License: mit
• Created: 2019-08-28T09:28:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T09:08:45.000Z (almost 2 years ago)
• Last Synced: 2024-07-31T07:15:29.766Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.81 MB
• Stars: 21
• Watchers: 2
• Forks: 3
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `@rekindle/use-request`
• awesome-react-hooks-cn - `@rekindle/use-request`
• awesome-react-hooks - `@rekindle/use-request`
• awesome-react-hooks - `@rekindle/use-request`

README

        
# use-request













A Tiny Custom React hooks for making request.

## Feature

- 👕 Typescript support.

- 🗜️ 1.3kb after minified without gzip.

- 📤 Easy to use with different request client.

## Install

```bash

yarn add @rekindle/use-request

```

## Basic Usage

```jsx

import useRequest from '@rekindle/use-request'

import getFooApi from '@/utils/axios'

function App () {

  const [{ loading, error, data }, fetch] = useRequest(getFooApi)

  useEffect(() => { fetch() }, [fetch])

  if (loading) return 'loading'

  if (error) return 'error'

  return data && 
{data}

}

```


## More Example

> Queries are typically start with loading, we can create a `useQuery` function before we use.

```js

function useQuery (api) {

  return useRequest(api, { loading: true })

}

```

### Query

```jsx

function Query () {

  const [{ loading, error, data }, fetch] = useQuery(queryFooApi)

  useEffect(() => { fetch() }, [fetch])

  if (loading) return 'loading...'

  if (error) return 'error'

  // no need to check data

  return 
{data}

}

```


### Multi Query

```jsx

function MultiQuery () {

  const [foo, fetchFoo] = useQuery(queryFooApi)

  const [bar, fetchBar] = useQuery(queryBarApi)

  useEffect(() => {

    fetchFoo()

    fetchBar()

  }, [fetchFoo, fetchBar])

  const renderContent = (state) => {

    const { loading, error, data } = state

    if (loading) return 'loading...'

    if (error) return 'error'

    return 
{data}

  }


  return (

    


      {renderContent(foo)}

      {renderContent(bar)}

    

  )

}

```


### Batch Query

```jsx

function BatchQuery () {

  const batchFetchApi = () => Promise.all([queryFooApi(), queryBarApi()])

  const [{ loading, error, data }, fetch] = useQuery(batchFetchApi)

  useEffect(() => { fetch() }, [fetch])

  if (loading) return 'loading...'

  if (error) return 'error'

  const [foo, bar] = data

  return (

    


      
{foo}

      
{bar}

      refetch batch

    

  )

}

```


### Mutate

```jsx

function Mutate () {

  const [{ loading, error, data }, mutate] = useRequest(mutateBazApi)

  const [value, setValue] = useState('')

  useEffect(() => {

    if (error) alert('error')

    if (data === 'success') alert('success')

  }, [error, data])

  return (

    


       setValue(e.target.value)} />

       mutate(value)}>submit

    

  )

}

```


## Api

```ts

type useRequest = (api, initialState) => [state, memoizedRequestCallback]

```

Notice: Why _momoized_ request callback ?

Reference: [Is it safe to omit functions from the list of dependencies?](https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies)

If you want a deep dive on useEffect and dependencies, it's here: https://overreacted.io/a-complete-guide-to-useeffect/

## Contribution

PR & issue welcome.

## License

MIT