react-fetch-json-hook
v0.2.0-rc12
Published
Use [Isomorphic fetch](https://github.com/matthew-andrews/isomorphic-fetch) as React [hooks](https://reactjs.org/docs/hooks-intro.html) with caching and support for SSR.
Downloads
110
Readme
react-fetch-json-hook
Use Isomorphic fetch as React hooks with caching and support for SSR.
Installation
npm install react-fetch-json-hook
Or if using yarn
yarn add react-fetch-json-hook
Usage
FetchConnector
import React from 'react'
import { render } from 'react-dom'
import { createFetchConnector, FetchHookProvider } from 'react-fetch-json-hook'
const connector = createFetchConnector()
const App = () => (
<FetchHookProvider connector={connector}>
<MyRootComponent />
</FetchHookProvider>
)
render(<App />, document.getElementById('root'))
useFetch
import { useFetch } from 'react-fetch-json-hook'
const Dogs = () => {
const { data, error, loading } = useFetch('/api/dogs')
if (loading) {
return <div>Loading...</div>
}
if (error) {
return <div>Error! {error.message}</div>
}
return (
<ul>
{data.dogs.map(dog => (
<li key={dog.id}>{dog.breed}</li>
))}
</ul>
)
}
useTriggerableFetch
import { useTriggerableFetch } from 'react-fetch-json-hook'
const Dogs = () => {
const { trigger, error, loading } = useTriggerableFetch('/api/dogs')
if (loading) {
return <div>Loading...</div>
}
if (error) {
return <div>Error! {error.message}</div>
}
return (
<ul>
<button onClick={trigger}>Fetch Dogs</button>
{data && data.dogs.map(dog => <li key={dog.id}>{dog.breed}</li>)}
</ul>
)
}
Authorization
import { createFetchConnector } from 'react-fetch-json-hook'
const connector = createFetchConnector({
requestHeaders: {
Authorization: '<token>',
},
})
Server-side rendering
import express from 'express'
import {
createFetchConnector,
createFetchSSRManager,
FetchHookProvider,
} from 'react-fetch-json-hook'
import { renderToString } from 'react-dom/server'
const Hello = () => {
const { data } = useFetch('/foo')
return <div>{data && data.join(',')}</div>
}
const app = express()
app.get('/', async (req, res) => {
const connector = createFetchConnector()
const renderedHtml = await getMarkupFromTree({
renderFunction: renderToString,
tree: (
<FetchHookProvider connector={connector}>
<Hello />
</FetchHookProvider>
),
})
// const initialStateForHydratation = connector.cache
res.send(renderedHtml)
})
Highly inspired by react-apollo-hooks