https://github.com/atomic-state/http-react
React hooks for data fetching
https://github.com/atomic-state/http-react
axios deduplication fetch fetch-api gql graphql hook hooks http javascript react react-hooks requests server server-actions ssr suspense swr
Last synced: about 1 month ago
JSON representation
React hooks for data fetching
- Host: GitHub
- URL: https://github.com/atomic-state/http-react
- Owner: atomic-state
- License: mit
- Created: 2021-08-13T03:10:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-11-09T08:22:17.000Z (5 months ago)
- Last Synced: 2025-11-09T10:18:18.936Z (5 months ago)
- Topics: axios, deduplication, fetch, fetch-api, gql, graphql, hook, hooks, http, javascript, react, react-hooks, requests, server, server-actions, ssr, suspense, swr
- Language: TypeScript
- Homepage: https://httpr.vercel.app/
- Size: 764 KB
- Stars: 9
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### HTTP React
Http React is a React hooks library for data fetching. It's built on top of the native `Fetch` API.
### Overview
With one hook call, you get all the information about a request that you can use to build UIs that are consistent and performant:
```jsx
import useFetch from 'http-react'
// This is the default fetcher.
const fetcher = (url, config) => fetch(url, config)
export default function App() {
const { data, loading, error, responseTime } = useFetch('/api/user-info', {
refresh: '30 sec',
fetcher
})
if (loading) return
Loading
if (error) return
An error ocurred
return (
Welcome, {data.name}
Profile loaded in {responseTime} miliseconds
)
}
```
It also works with Next.js' server functions:
```tsx
// actions.ts
'use server'
import { actionData } from 'http-react'
export async function getData({ id }: { id: number }) {
return actionData({
foo: 'bar'
})
}
```
```tsx
// page.tsx
'use client'
import { useAction } from 'http-react'
import { getData } from '@/actions'
export default function Page() {
// data has static typing inferred from the action result
const { data, isPending, error } = useAction(getData, {
params: {
id: 1 // This will show an error if id is not a number
}
})
return isPending ? (
Loading...
) : error ? (
Something went wrong
) : (
Welcome
{data.foo}
)
}
```
It supports many features that are necessary in modern applications, while giving developers full control over the request configuration:
- Server-Side Rendering
- Server actions
- React Native
- Request deduplication
- Suspense
- Refresh
- Retry on error
- Pagination
- Local mutation (Optimistic UI)
- qraphql
and [more](https://httpr.vercel.app/docs/api)!
#### Installation:
```bash
npm install --save http-react
```
Or
```bash
yarn add http-react
```
[Getting started](https://httpr.vercel.app/docs)