All hooks

function App() {
  const { data } = useBlob('/logo.png', { objectURL: true })
 
  return <img src={data} />
}

const statusCode = useCode('id')
 
return <p>Code: {statusCode}</p>

const config = useConfig('id')
 
return <pre>{JSON.stringify(config, null, 2)}</pre>

const data = useData('id')
 
return <p>Name: {data.name}</p>

const error = useError('id')
 
if (error) return <p>Error</p>

const { data, loading, error } = useFetchId('id')
 
if (loading) return <p>Loading</p>
 
if (error) return <p>Error</p>
 
return <p>Name: {data.name}</p>

import { gql, useGql } from 'http-react'
 
const myQuery = gql`
  query {
    profile {
      name
    }
  }
`
 
function App() {
  const { data, loading } = useGql(myQuery, {
    default: {
      profile: {
        name: ''
      }
    }
  })
 
  if (loading) return <p>Loading</p>
 
  return <p>{data.data.profile.name}</p>
}

import { useImperative } from 'http-react'
 
function App() {
  const fetcher = useImperative()
 
  useEffect(() => {
    async function getInfo() {
      const { data, error, config } = fetcher.get('/info')
      console.log(data)
    }
    getInfo()
  }, [])
}

const loading = useLoading('id')
 
if (loading) return <p>Loading</p>

const mutateUser = useMutate('user')
 
const afterMutate = () => revalidate('user')
 
return (
  <button
    onClick={() =>
      mutateUser(
        (u) => ({
          ...u,
          name: ''
        }),
        afterMutate
      )
    }
  >
    Update
  </button>
)

const lastSync = useRequestEnd('id')
 
if (!lastSync) return <p>Waiting sync...</p>
 
return <p>Last sync: {lastSync.toLocaleDateString()}

const startup = useRequestStart('id')
 
if (!startup) return <p>Request hasn't been sent</p>
 
return <p>Request started: {startup.toLocaleDateString()}

useResolve('id', (data) => {
  console.log('Data sync:', data)
})
 
useResolve('another-id', (data) => {
  console.log('Another data was sync:', data)
})

const responseTime = useResponseTime('id')
 
if (!responseTime) return <p>Loading...</p>
 
return <p>Loaded in {responseTime} miliseconds</p>

const data = useText('id')
 
return <p>{data}</p>

const expiration = useExpiration('id')
 
return <p>Expires: {expiration?.toLocaleTimeString()}</p>

const hasData = useHasData('id')
 
return <p>{hasData ? 'Data exists' : 'There is no data...'}</p>

const [q, setQ] = useState('')
const { data: results } = useDebounceFetch('/search', {
  auto: q,
  query: {
    q
  },
  debounce: '2 sec' // Wait 2 seconds after props change to send a new request
})

import { hasBaseUrl } from 'http-react'
 
hasBaseUrl('https://facebook.com') // -> true
hasBaseUrl('http://localhost:8000') // -> true
hasBaseUrl('netflix.com') // -> false

import { isDefined } from 'http-react'
 
isDefined(null) // -> true
isDefined('') // -> true
isDefined() // -> false
isDefined(undefined) // -> false

import { isFunction } from 'http-react'
 
isFunction(window.location.reload) // -> true
isFunction('') // -> false
isFunction(() => {}) // -> true
isFunction(function () {}) // -> true

import { notNull } from 'http-react'
 
notNull({}) // -> true
notNull('') // -> true
notNull(0) // -> true
notNull(null) // -> false
notNull(document.getElementById('non-existent-element')) // -> false

import useFetch, { revalidate } from 'http-react'
 
function App() {
  const { data } = useFetch('/api')
 
  return (
    <button
      onClick={() => {
        revalidate('GET /api')
      }}
    >
      Revalidate
    </button>
  )
}

import useFetch, { revalidate } from 'http-react'
 
function App() {
  useFetch('/api')
  useFetch('/another')
 
  useFetch('/other', {
    id: {
      name: 'Other'
    }
  })
 
  return (
    <button
      onClick={() => {
        revalidate([
          'GET /api',
          'GET /another',
 
          // The id that was passed to the third 'useFetch'
          {
            name: 'Other'
          }
        ])
      }}
    >
      Revalidate
    </button>
  )
}

import { serialize } from 'http-react'
 
serialize({ name: 'dany' }, null, 2) // -> '{"name":"dany"}'

import { setURLParams } from 'http-react'
 
setURLParams('api/[path]/:id', { path: 'books', id: 10 }) // -> 'api/books/10'
 
setURLParams('https://api/[id]?photo=some-photo.png', {
  id: 24
}) // -> 'https://api/24?photo=some-photo.png'

import { isFormData } from 'http-react'
 
isFormData({}) // -> false
isFormData(new FormData()) // -> true

import { useFetch, mutateData } from 'http-react'
 
function onlyMutate() {
  mutateData([
    'GET /profile',
    (prev) => ({
      ...prev,
      name: 'new name'
    })
  ])
}
 
function mutateAndRevalidate() {
  mutateData([
    'GET /profile',
    (prev) => ({
      ...prev,
      name: 'new name'
    }),
    true // this will revalidate after mutation
  ])
}
 
function mutateMany() {
  mutateData(
    [
      'GET /profile',
      (prev) => ({
        ...prev,
        name: 'new name'
      }),
      true // this will revalidate after mutation
    ],
    [
      'GET /post',
      {
        title: ''
      },
      true // this will revalidate after mutation
    ],
    [
      {
        this_id: 'is_an_object"
      },
      {
        title: 'New title'
      },
      true // this will revalidate after mutation
    ]
  )
}
 
function App() {}