importuseFetchfrom'use-http'functionTodos(){const[todos,setTodos]=useState([])const{ get, post, response, loading, error}=useFetch('https://example.com')useEffect(()=>{initializeTodos()},[])// componentDidMountasyncfunctioninitializeTodos(){constinitialTodos=awaitget('/todos')if(response.ok)setTodos(initialTodos)}asyncfunctionaddTodo(){constnewTodo=awaitpost('/todos',{title:'my new todo'})if(response.ok)setTodos([...todos,newTodo])}return(<><buttononClick={addTodo}>Add Todo</button>{error&&'Error!'}{loading&&'Loading...'}{todos.map(todo=>(<divkey={todo.id}>{todo.title}</div>))}</>)}

importuseFetchfrom'use-http'functionTodos(){constoptions={}// these options accept all native `fetch` options// the last argument below [] means it will fire onMount (GET by default)const{ loading, error, data=[]}=useFetch('https://example.com/todos',options,[])return(<>{error&&'Error!'}{loading&&'Loading...'}{data.map(todo=>(<divkey={todo.id}>{todo.title}</div>))}</>)}

importuseFetch,{Provider}from'use-http'functionTodos(){const{data:todos=[]}=useFetch('/todos',{suspense:true// A. can put `suspense: true` here},[])// onMountreturntodos.map(todo=><divkey={todo.id}>{todo.title}</div>)}functionApp(){constoptions={suspense:true// B. can put `suspense: true` here too}return(<Providerurl='https://example.com'options={options}><Suspensefallback='Loading...'><Todos/></Suspense></Provider>)}

importuseFetch,{Provider}from'use-http'functionTodos(){const[todos,setTodos]=useState([])// A. can put `suspense: true` hereconst{ get, response}=useFetch({suspense:true})constloadInitialTodos=async()=>{consttodos=awaitget('/todos')if(response.ok)setTodos(todos)}// componentDidMountuseEffect(()=>{loadInitialTodos()},[])returntodos.map(todo=><divkey={todo.id}>{todo.title}</div>)}functionApp(){constoptions={suspense:true// B. can put `suspense: true` here too}return(<Providerurl='https://example.com'options={options}><Suspensefallback='Loading...'><Todos/></Suspense></Provider>)}

importuseFetch,{Provider}from'use-http'constTodos=()=>{const[page,setPage]=useState(1)const{ data=[], loading}=useFetch(`/todos?page=${page}&amountPerPage=15`,{onNewData:(currTodos,newTodos)=>[...currTodos, ...newTodos],// appends newly fetched todosperPage:15,// stops making more requests if last todos fetched < 15},[page])// runs onMount AND whenever the `page` updates (onUpdate)return(<ul>{data.map(todo=><likey={todo.id}>{todo.title}</li>}{loading&&'Loading...'}{!loading&&(<buttononClick={()=>setPage(page+1)}>Load More Todos</button>)}</ul>)}constApp=()=>(<Providerurl='https://example.com'><Todos/></Provider>)

var[request,response,loading,error]=useFetch('https://example.com')// want to use object destructuring? You can do that toovar{  request,  response,// 🚨 Do not destructure the `response` object!  loading,  error,  data,  cache,// methods: get, set, has, delete, clear (like `new Map()`)  get,  post,  put,  patch,  delete// don't destructure `delete` though, it's a keyworddel,// <- that's why we have this (del). or use `request.delete`  head,  options,  connect,  trace,  mutate,// GraphQL  query,// GraphQL  abort}=useFetch('https://example.com')// 🚨 Do not destructure the `response` object!// 🚨 This just shows what fields are available in it.var{  ok,  status,  headers,  data,  type,  statusText,  url,  body,  bodyUsed,  redirected,// methods  json,  text,  formData,  blob,  arrayBuffer,  clone}=responsevar{  loading,  error,  data,  cache,// methods: get, set, has, delete, clear (like `new Map()`)  get,  post,  put,  patch,  delete// don't destructure `delete` though, it's a keyworddel,// <- that's why we have this (del). or use `request.delete`  mutate,// GraphQL  query,// GraphQL  abort}=request

varrequest=useFetch('https://example.com')request.post('/todos',{no:'way'})

const{ get, abort, loading,data:repos}=useFetch('https://api.github.com/search/repositories?q=')// the line below is not isomorphic, but for simplicity we're using the browsers `encodeURI`constsearchGithubRepos=e=>get(encodeURI(e.target.value))<><inputonChange={searchGithubRepos}/><buttononClick={abort}>Abort</button>{loading ?'Loading...' :repos.data.items.map(repo=>(<divkey={repo.id}>{repo.name}</div>))}</>

constQUERY=`  query Todos($userID string!) {    todos(userID: $userID) {      id      title    }  }`functionApp(){constrequest=useFetch('http://example.com')constgetTodosForUser=id=>request.query(QUERY,{userID:id})return(<><buttononClick={()=>getTodosForUser('theUsersID')}>Get User's Todos</button>{request.loading ?'Loading...' :<pre>{request.data}</pre>}</>)}

constMUTATION=`  mutation CreateTodo($todoTitle string) {    todo(title: $todoTitle) {      id      title    }  }`functionApp(){const[todoTitle,setTodoTitle]=useState('')constrequest=useFetch('http://example.com')constcreatetodo=()=>request.mutate(MUTATION,{ todoTitle})return(<><inputonChange={e=>setTodoTitle(e.target.value)}/><buttononClick={createTodo}>Create Todo</button>{request.loading ?'Loading...' :<pre>{request.data}</pre>}</>)}

Query for todos

import{useQuery}from'use-http'exportdefaultfunctionQueryComponent(){// can also do it this way:// const [data, loading, error, query] = useQuery`// or this way:// const { data, loading, error, query } = useQuery`constrequest=useQuery`    query Todos($userID string!) {      todos(userID: $userID) {        id        title      }    }  `constgetTodosForUser=id=>request.query({userID:id})return(<><buttononClick={()=>getTodosForUser('theUsersID')}>Get User's Todos</button>{request.loading ?'Loading...' :<pre>{request.data}</pre>}</>)}

Add a new todo

import{useMutation}from'use-http'exportdefaultfunctionMutationComponent(){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      }    }  `constcreateTodo=()=>mutate({ todoTitle})return(<><inputonChange={e=>setTodoTitle(e.target.value)}/><buttononClick={createTodo}>Create Todo</button>{loading ?'Loading...' :<pre>{data}</pre>}</>)}

Adding the Provider

import{Provider}from'use-http'importQueryComponentfrom'./QueryComponent'importMutationComponentfrom'./MutationComponent'functionApp(){constoptions={headers:{Authorization:'Bearer YOUR_TOKEN_HERE'}}return(<Providerurl='http://example.com'options={options}><QueryComponent/><MutationComponent/><Provider/>  )}

import{Provider}from'use-http'import{toCamel}from'convert-keys'functionApp(){let[token,setToken]=useLocalStorage('token')constoptions={interceptors:{// every time we make an http request, this will run 1st before the request is made// url, path and route are supplied to the interceptor// request options can be modified and must be returnedrequest:async({ options, url, path, route})=>{if(isExpired(token)){token=awaitgetNewToken()setToken(token)}options.headers.Authorization=`Bearer${token}`returnoptions},// every time we make an http request, before getting the response back, this will runresponse:async({ response, request})=>{// unfortunately, because this is a JS Response object, we have to modify it directly.// It shouldn't have any negative affect since this is getting reset on each request.constres=responseif(res.data)res.data=toCamel(res.data)returnres}}}return(<Providerurl='http://example.com'options={options}><SomeComponent/><Provider/>  )}

importuseFetchfrom'use-http'constFileUploader=()=>{const[file,setFile]=useState()const{ post}=useFetch('https://example.com/upload')constuploadFile=async()=>{constdata=newFormData()data.append('file',file)if(fileinstanceofFormData)awaitpost(data)}return(<div>{/* Drop a file onto the input below */}<inputonChange={e=>setFile(e.target.files[0])}/><buttononClick={uploadFile}>Upload</button></div>)}

importuseFetchfrom'use-http'constApp=()=>{const[name,setName]=useState('')const{ get, loading, error, response}=useFetch('http://example.com')consthandleClick=async()=>{awaitget('/users/1?name=true')// will return just the user's nameconsttext=awaitresponse.text()setName(text)}return(<><buttononClick={handleClick}>Load Data</button>{error&&error.messge}{loading&&"Loading..."}{name&&<div>{name}</div>}</>)}

importuseFetchfrom'use-http'constTodos=()=>{// let's say for this request, you don't want the `Accept` header at allconst{ loading, error,data:todos=[]}=useFetch('/todos',globalOptions=>{deleteglobalOptions.headers.AcceptreturnglobalOptions},[])// onMountreturn(<>{error&&error.messge}{loading&&"Loading..."}{todos&&<ul>{todos.map(todo=><likey={todo.id}>{todo.title}</li>)}</ul>}</>)}constApp=()=>{constoptions={headers:{Accept:'application/json'}}return(<Providerurl='https://url.com'options={options}><Todos/></Provider>}

importuseFetchfrom'use-http'constTestRetry=()=>{const{ response, get}=useFetch('https://httpbin.org/status/305',{// make sure `retries` is set otherwise it won't retryretries:1,retryOn:[305],// ORretryOn:async({ attempt, error, response})=>{// returns true or false to determine whether to retryreturnerror||response&&response.status>=300},retryDelay:3000,// ORretryDelay:({ attempt, error, response})=>{// exponential backoffreturnMath.min(attempt>1 ?2**attempt*1000 :1000,30*1000)// linear backoffreturnattempt*1000}})return(<><buttononClick={()=>get()}>CLICK</button><pre>{JSON.stringify(response,null,2)}</pre></>)}