https://github.com/amamov/swr-fetcher

Advanced fetcher function npm package for React SWR
https://github.com/amamov/swr-fetcher

axios npm npm-package react swr typescript

Last synced: 27 days ago
JSON representation

Advanced fetcher function npm package for React SWR

• Host: GitHub
• URL: https://github.com/amamov/swr-fetcher
• Owner: amamov
• License: mit
• Created: 2021-08-04T12:00:21.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-06T05:15:40.000Z (over 3 years ago)
• Last Synced: 2024-08-09T06:37:33.055Z (3 months ago)
• Topics: axios, npm, npm-package, react, swr, typescript
• Language: TypeScript
• Homepage:
• Size: 8.79 KB
• Stars: 8
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [swr-fetcher](https://www.npmjs.com/package/swr-fetcher)

> Advanced OOP principles fetcher npm package for [React SWR](https://github.com/vercel/swr) based in [axios](https://github.com/axios/axios).

> In fact, you can use swr even if you don't use it. In this case, it can be used as a class that wraps axios based on the singleton pattern.

## Quick Start

```shell

npm i --save swr-fetcher

```

```shell

yarn add swr-fetcher

```

## Examples

```typescript

import useSWR from 'swr'

import Fetcher, { FetchError } from 'swr-fetcher'

// Singleton Pattern

const fetcher = new Fetcher({ baseURL: 'https://api.example.com' })

export default function App(): JSX.Element {

  const { data: users, error } = useSWR(

    '/api/users',

    fetcher.get.bind(fetcher),

  )

  // code...

}

```

```typescript

// post fetcher

const { data: users, error } = useSWR(

  '/api/users',

  fetcher.post.bind(fetcher, requestData),

)

```

You can use like this.

```typescript

const fetchConfig: FetchConfig = {

  headers: { 'X-Requested-With': 'XMLHttpRequest' },

  timeout: 1000, // default is `0` (no timeout)

  withCredentials: false, // default

}

const { data: users, error } = useSWR('/api/users', (url) =>

  fetcher.get.bind(fetcher)(url, fetchConfig),

)

```