# react-query-lite

> The tiny react data-loader inspired by react-query

Latest version **0.1.8** (published 2022-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-query-lite
pnpm add react-query-lite
yarn add react-query-lite
bun add react-query-lite
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2022-02-07 |
| First published | 2021-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 125.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Eyvind Gerhard Sletten |
| Maintainers | gerhardsletten |
| Keywords | react, preact, data-loader, fetch, javascript |

## Links

- npm: https://www.npmjs.com/package/react-query-lite
- Repository: https://github.com/gerhardsletten/react-query-lite
- Homepage: https://github.com/gerhardsletten/react-query-lite#readme
- Issues: https://github.com/gerhardsletten/react-query-lite/issues
- npm.io page: https://npm.io/package/react-query-lite

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.8 (latest) — 2022-02-07
- 0.1.7 — 2021-12-06
- 0.1.6 — 2021-11-13
- 0.1.5 — 2021-11-13
- 0.1.4 — 2021-11-10
- 0.1.3 — 2021-11-09
- 0.1.2 — 2021-11-08
- 0.1.1 — 2021-11-08
- 0.1.0 — 2021-11-05
- 0.0.2 — 2021-11-05
- 0.0.1 — 2021-11-05

## README

# React-query-lite

The tiny react data-loader inspired by react-query

`npm i react-query-lite`

## Less impact on your client-size bundle

| Library | Parsed size | Gzipped size |
| --- | --- | --- |
| react-query | 40.77 kb | 9.96 kb | 
| react-query-lite | 7.46 kb | 2.47 kb | 

The comparison is based on a simple setup with

```js
import { QueryClient, QueryClientProvider, useQuery } from 'react-query-lite'

const client = new QueryClient()

const App = () => (
  <QueryClientProvider client={client}>
    <Page>
  </QueryClientProvider>
)

const Page = () => {
  const { data, error, isLoading } = useQuery('cache-key', async () => {
    const data = await getDataFromApi()
    return data
  })
  return (
    <div>
      {isLoading && 'isloading'}
      {error && error.message}
      {data && 'display data'}
    </div>
  )
}

```

## Api

### Query options (Object)

Used as third parameter to `useQuery` and as `defaultOptions` to QueryClient

* keepPreviousData: Bool (default false) - keep previous data if key change in the `useQuery` hook
* cacheTime: Int (default Infinity) - how long time before returning renders of components should fetch new data

### QueryClient

#### new QueryClient({ cache, defaultOptions })

* cache: Object (default {})
* defaultOptions: Object (defaults to above Query options)

```js
const client = new QueryClient({
  cache: {
    'my-key': {
      'data': 'Hello world'
    }
  },
  defaultOptions: {
    keepPreviousData: true,
    cacheTime: 60 * 60 * 1000 // 1 hour
  }
})
```

#### prefetchQuery(queryKey, fetchFn, options)

Use to prefetch data server-side

```js
const data = await client.prefetchQuery(queryKey, fetchFn, options)
console.log(data)
```

#### getCache()

Get cache object from client that can be passed to client side QueryClient to avoid refetch

```js
const cache = client.getCache()
console.log(cache)
```

### useQuery(queryKey, fetchFn, options)

Use third option parameter to pass custom options for this query:

```js
const {
  data,
  isLoading,
  error,
  status,
  refetch,
  fetchTime
} = await useQuery(queryKey, fetchFn, {
  keepPreviousData: true,
  cacheTime: 60 * 1000 // 1 minute
})
```

### useMutation(fetchFn)

Use third option parameter to pass custom options for this query:

```js
const {
  data,
  isLoading,
  error,
  mutateAsync
} = await useMutation(async ({ username, password }) => {
  const req = await fetch('/api/login', {
    method: 'post',
    body: body: JSON.stringify({ username, passord })
  })
  const json = await res.json()
  return json
})
```

## Tradeoffs compared with `react-query`

* queryKey as to be a string

---
_Source: https://npm.io/package/react-query-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._