npm i use-http
url and optionsuseFetchimport useFetch from 'use-http'
function Todos() {
const [todos, setTodos] = useState([])
const [request, response] = useFetch('https://example.com')
// componentDidMount
const mounted = useRef(false)
useEffect(() => {
if (!mounted.current) {
initializeTodos()
mounted.current= true
}
})
async function initializeTodos() {
const initialTodos = await request.get('/todos')
if (response.ok) setTodos(initialTodos)
}
async function addTodo() {
const newTodo = await request.post('/todos', {
title: 'no way',
})
if (response.ok) setTodos([...todos, newTodo])
}
return (
<>
<button onClick={addTodo}>Add Todo</button>
{request.error && 'Error!'}
{request.loading && 'Loading...'}
{todos.length > 0 && todos.map(todo => (
<div key={todo.id}>{todo.title}</div>
)}
</>
)
}
useFetchimport useFetch from 'use-http'
function Todos() {
const options = { // accepts all `fetch` options
onMount: true, // will fire on componentDidMount (GET by default)
data: [] // setting default for `data` as array instead of undefined
}
const { loading, error, data } = useFetch('https://example.com/todos', options)
return (
<>
{error && 'Error!'}
{loading && 'Loading...'}
{!loading && data.map(todo => (
<div key={todo.id}>{todo.title}</div>
)}
</>
)
}
Providerimport useFetch, { Provider } from 'use-http'
function Todos() {
const { loading, error, data } = useFetch({
onMount: true,
path: '/todos',
data: []
})
return (
<>
{error && 'Error!'}
{loading && 'Loading...'}
{!loading && data.map(todo => (
<div key={todo.id}>{todo.title}</div>
)}
</>
)
}
const App = () => (
<Provider url='https://example.com'>
<Todos />
</Provider>
)
useFetchvar [request, response, loading, error] = useFetch('https://example.com')
// want to use object destructuring? You can do that too
var {
request,
response,
loading,
error,
data,
get,
post,
put,
patch,
delete // don't destructure `delete` though, it's a keyword
del, // <- that's why we have this (del). or use `request.delete`
mutate, // GraphQL
query, // GraphQL
abort
} = useFetch('https://example.com')
var {
loading,
error,
data,
get,
post,
put,
patch,
delete // don't destructure `delete` though, it's a keyword
del, // <- that's why we have this (del). or use `request.delete`
mutate, // GraphQL
query, // GraphQL
abort
} = request
var {
data,
ok,
headers,
...restOfHttpResponse // everything you would get in a response from an http request
} = response
useFetch⚠️ baseUrl is no longer supported, it is now only url
var request = useFetch({ url: 'https://example.com' })
// OR
var request = useFetch('https://example.com')
request.post('/todos', {
no: 'way'
})
useFetch
const githubRepos = useFetch({
url: `https://api.github.com/search/repositories?q=`
})
// the line below is not isomorphic, but for simplicity we're using the browsers `encodeURI`
const searchGithubRepos = e => githubRepos.get(encodeURI(e.target.value))
<>
<input onChange={searchGithubRepos} />
<button onClick={githubRepos.abort}>Abort</button>
{githubRepos.loading ? 'Loading...' : githubRepos.data.items.map(repo => (
<div key={repo.id}>{repo.name}</div>
))}
</>
useFetch
const QUERY = `
query Todos($userID string!) {
todos(userID: $userID) {
id
title
}
}
`
function App() {
const request = useFetch('http://example.com')
const getTodosForUser = id => request.query(QUERY, { userID: id })
return (
<>
<button onClick={() => getTodosForUser('theUsersID')}>Get User's Todos</button>
{request.loading ? 'Loading...' : <pre>{request.data}</pre>}
</>
)
}
useFetchThe Provider allows us to set a default url, options (such as headers) and so on.
const MUTATION = `
mutation CreateTodo($todoTitle string) {
todo(title: $todoTitle) {
id
title
}
}
`
function App() {
const [todoTitle, setTodoTitle] = useState('')
const request = useFetch('http://example.com')
const createtodo = () => request.mutate(MUTATION, { todoTitle })
return (
<>
<input onChange={e => setTodoTitle(e.target.value)} />
<button onClick={createTodo}>Create Todo</button>
{request.loading ? 'Loading...' : <pre>{request.data}</pre>}
</>
)
}
Provider using the GraphQL useMutation and useQueryimport { useQuery } from 'use-http'
export default function QueryComponent() {
// can also do it this way:
// const [data, loading, error, query] = useQuery`
// or this way:
// const { data, loading, error, query } = useQuery`
const request = useQuery`
query Todos($userID string!) {
todos(userID: $userID) {
id
title
}
}
`
const getTodosForUser = id => request.query({ userID: id })
return (
<>
<button onClick={() => getTodosForUser('theUsersID')}>Get User's Todos</button>
{request.loading ? 'Loading...' : <pre>{request.data}</pre>}
</>
)
}
import { useMutation } from 'use-http'
export default function MutationComponent() {
const [todoTitle, setTodoTitle] = useState('')
// can also do it this way:
// const request = useMutation`
// or this way:
// const { data, loading, error, mutate } = useMutation`
const [data, loading, error, mutate] = useMutation`
mutation CreateTodo($todoTitle string) {
todo(title: $todoTitle) {
id
title
}
}
`
const createTodo = () => mutate({ todoTitle })
return (
<>
<input onChange={e => setTodoTitle(e.target.value)} />
<button onClick={createTodo}>Create Todo</button>
{loading ? 'Loading...' : <pre>{data}</pre>}
</>
)
}
These props are defaults used in every request inside the <Provider />. They can be overwritten individually
import { Provider } from 'use-http'
import QueryComponent from './QueryComponent'
import MutationComponent from './MutationComponent'
function App() {
const options = {
headers: {
Authorization: 'Bearer YOUR_TOKEN_HERE'
}
}
return (
<Provider url='http://example.com' options={options}>
<QueryComponent />
<MutationComponent />
<Provider/>
)
}
This example shows how we can do authentication in the request interceptor and how we can camelCase the results in the response interceptor
import { Provider } from 'use-http'
import camelCase from 'camelcase-keys-recursive'
function App() {
let [token] = useLocalStorage('token')
const options = {
interceptors: {
// every time we make an http request, this will run 1st before the request is made
request: async (options) => {
if (isExpired(token)) token = await getNewToken()
options.headers.Authorization = `Bearer ${token}`
return options
},
// every time we make an http request, before getting the response back, this will run
response: (response) => camelCase(response)
}
}
return (
<Provider url='http://example.com' options={options}>
<SomeComponent />
<Provider/>
)
}
| Hook | Description |
|---|---|
useFetch | The base hook |
useQuery | For making a GraphQL query |
useMutation | For making a GraphQL mutation |
This is exactly what you would pass to the normal js fetch, with a little extra.
| Option | Description | Default |
|---|---|---|
onMount | Once the component mounts, the http request will run immediately | false |
url | Allows you to set a base path so relative paths can be used for each request :) | empty string |
data | Allows you to set a default value for data | undefined |
loading | Allows you to set default value for loading | false unless onMount === true |
interceptors.request | Allows you to do something before an http request is sent out. Useful for authentication if you need to refresh tokens a lot. | undefined |
interceptors.response | Allows you to do something after an http response is recieved. Useful for something like camelCasing the keys of the response. | undefined |
useFetch({
// accepts all `fetch` options such as headers, method, etc.
url: 'https://example.com', // used to be `baseUrl`
onMount: true,
data: [], // default for `data` field
loading: false, // default for `loading` field
interceptors: { // typically, `interceptors` would be added as an option to the `<Provider />`
request: async (options) => { // `async` is not required
return options // returning the `options` is important
},
response: (response) => {
return response // returning the `response` is important
}
}
})
If you have feature requests, let's talk about them in this issue!
useMutation + useQuery const user = useFetch()
user
.headers({
auth: jwt
})
.get()
<Provider />. This would
convert all the keys in the response to camelCase.
Not exactly sure how this syntax should look because what
if you want to have this only go 1 layer deep into the response
object. Or if this is just out of scope for this library.<Provider responseKeys={{ case: 'camel' }}><App /></Provider>
const request = useFetch({
onUpdate: [props.id] // everytime props.id is updated, it will re-run the request GET in this case
retry: 3, // amount of times it should retry before erroring out
retryDuration: 1000, // amount of time for each retry before timing out?
timeout: 10000, // amount of time period before erroring out
onServer: true, // potential idea to fetch on server instead of just having `loading` state. Not sure if this is a good idea though
query: `some graphql query` // if you would prefer to pass the query in the config
mutation: `some graphql mutation` // if you would prefer to pass the mutation in the config
})
GraphQLconst request = useQuery({ onMount: true })`your graphql query`
<Provider url='url.com' options={{ headers: 'Authentication': 'Bearer MY_TOKEN' }}><App /></Provider>, but for one api call, you don't want that header in your useFetch at all for one instance in your app. This would allow you to remove thatconst request = useFetch('https://url.com', globalOptions => {
delete globalOptions.headers.Authorization
return globalOptions
})
useQuery and useMutation 😊import React, { Suspense, unstable_ConcurrentMode as ConcurrentMode, useEffect } from 'react'
function WithSuspense() {
const suspense = useFetch('https://example.com')
useEffect(() => {
suspense.read()
}, [])
if (!suspense.data) return null
return <pre>{suspense.data}</pre>
}
function App() (
<ConcurrentMode>
<Suspense fallback="Loading...">
<WithSuspense />
</Suspense>
</ConcurrentMode>
)
const App = () => {
const [todoTitle, setTodoTitle] = useState('')
// if there's no <Provider /> used, useMutation works this way
const mutation = useMutation('http://example.com', `
mutation CreateTodo($todoTitle string) {
todo(title: $todoTitle) {
id
title
}
}
`)
// ideally, I think it should be mutation.write({ todoTitle }) since mutation ~= POST
const createTodo = () => mutation.read({ todoTitle })
if (!request.data) return null
return (
<>
<input onChange={e => setTodoTitle(e.target.value)} />
<button onClick={createTodo}>Create Todo</button>
<pre>{mutation.data}</pre>
</>
)
}
FAQs
- useFetch - managed state, request, response, etc. [](https://codesandbox.io/s/usefetch-request-response-managed-state-ruyi3?file=/src/index.js) [](https://w
We found that use-http demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.