https://github.com/gerhardsletten/react-query-lite

The tiny react data-loader inspired by react-query
https://github.com/gerhardsletten/react-query-lite

Last synced: 22 days ago
JSON representation

The tiny react data-loader inspired by react-query

• Host: GitHub
• URL: https://github.com/gerhardsletten/react-query-lite
• Owner: gerhardsletten
• Created: 2021-11-04T07:04:58.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-07T13:02:47.000Z (over 2 years ago)
• Last Synced: 2024-10-02T10:06:42.528Z (about 1 month ago)
• Language: JavaScript
• Size: 815 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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 = () => (

  

    

  

)

const Page = () => {

  const { data, error, isLoading } = useQuery('cache-key', async () => {

    const data = await getDataFromApi()

    return data

  })

  return (

    


      {isLoading && 'isloading'}

      {error && error.message}

      {data && 'display data'}

    

  )

}


```

## 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