@nanostores/query
Advanced tools
Comparing version 0.2.7 to 0.2.8
import { MapStore, ReadableAtom } from "nanostores"; | ||
type NoKey = null | undefined | void | false; | ||
type SomeKey = string | number | true; | ||
export type KeyInput = SomeKey | Array<SomeKey | ReadableAtom<SomeKey | NoKey>>; | ||
export type KeyInput = SomeKey | Array<SomeKey | ReadableAtom<SomeKey | NoKey> | FetcherStore>; | ||
type Key = string; | ||
@@ -31,2 +31,3 @@ type KeyParts = SomeKey[]; | ||
export type FetcherStore<T = any, E = any> = MapStore<FetcherValue<T, E>> & { | ||
_: Symbol; | ||
key?: string; | ||
@@ -33,0 +34,0 @@ invalidate: (...args: any[]) => void; |
@@ -83,2 +83,3 @@ import { map, onStart, onStop, atom, startTask } from "nanostores"; | ||
}), settings = { ...globalSettings, ...fetcherSettings, fetcher }; | ||
fetcherStore._ = fetcherSymbol; | ||
fetcherStore.invalidate = () => { | ||
@@ -274,13 +275,13 @@ const { key } = fetcherStore; | ||
for (let i = 0; i < keys.length; i++) { | ||
const key = keys[i]; | ||
if (isSomeKey(key)) { | ||
keyParts.push(key); | ||
continue; | ||
const keyOrStore = keys[i]; | ||
if (isSomeKey(keyOrStore)) { | ||
keyParts.push(keyOrStore); | ||
} else { | ||
unsubs.push( | ||
keyOrStore.subscribe((newValue) => { | ||
keyParts[i] = isFetcherStore(keyOrStore) ? keyOrStore.value && "data" in keyOrStore.value ? keyOrStore.key : null : newValue; | ||
setKeyStoreValue(); | ||
}) | ||
); | ||
} | ||
unsubs.push( | ||
key.subscribe((newValue) => { | ||
keyParts[i] = newValue; | ||
setKeyStoreValue(); | ||
}) | ||
); | ||
} | ||
@@ -290,2 +291,5 @@ setKeyStoreValue(); | ||
}; | ||
function isFetcherStore(v) { | ||
return v._ === fetcherSymbol; | ||
} | ||
const FOCUS = 1, RECONNECT = 2, INVALIDATE_KEYS = 3, SET_CACHE = 4; | ||
@@ -307,2 +311,3 @@ const subscribe = (name, fn) => { | ||
const getNow = () => (/* @__PURE__ */ new Date()).getTime(); | ||
const fetcherSymbol = Symbol(); | ||
const loading = { loading: true }, notLoading = { loading: false }; | ||
@@ -309,0 +314,0 @@ export { |
{ | ||
"name": "@nanostores/query", | ||
"version": "0.2.7", | ||
"version": "0.2.8", | ||
"description": "Tiny remote data fetching library for Nano Stores", | ||
@@ -78,3 +78,3 @@ "scripts": { | ||
}, | ||
"limit": "1600 B" | ||
"limit": "1631 B" | ||
} | ||
@@ -81,0 +81,0 @@ ], |
@@ -8,3 +8,3 @@ # Nano Stores Query | ||
- **Small**. 1.6 Kb (minified and gzipped). | ||
- **Small**. 1.63 Kb (minified and gzipped). | ||
- **Familiar DX**. If you've used [`swr`](https://swr.vercel.app/) or | ||
@@ -56,5 +56,3 @@ [`react-query`](https://react-query-v3.tanstack.com/), you'll get the same treatment, | ||
Second, we create the fetcher store. `createFetcherStore` returns the usual `atom()` | ||
from Nano Stores, that is reactively connected to all stores passed as keys. Whenever | ||
the `$currentPostId` updates, `$currentPost` will call the fetcher once again. | ||
Second, we create the fetcher store. `createFetcherStore` returns the usual `atom()` from Nano Stores, that is reactively connected to all stores passed as keys. Whenever the `$currentPostId` updates, `$currentPost` will call the fetcher once again. | ||
@@ -69,4 +67,3 @@ ```ts | ||
Third, just use it in your components. `createFetcherStore` returns the usual | ||
`atom()` from Nano Stores. | ||
Third, just use it in your components. `createFetcherStore` returns the usual `atom()` from Nano Stores. | ||
@@ -97,7 +94,11 @@ ```tsx | ||
type KeyInput = SomeKey | Array<SomeKey | ReadableAtom<SomeKey | NoKey>>; | ||
type KeyInput = SomeKey | Array<SomeKey | ReadableAtom<SomeKey | NoKey> | FetcherStore>; | ||
``` | ||
Under the hood, nanoquery will get the `SomeKey` values and pass them to your fetcher like this: `fetcher(...keyPartsAsStrings)`. If any atom value is either `NoKey` , we never call the fetcher—this is the conditional fetching technique we have. If you had `SomeKey` and then transitioned to `NoKey`, store value will be also unset. | ||
Under the hood, nanoquery will get the `SomeKey` values and pass them to your fetcher like this: `fetcher(...keyParts)`. Few things to notice: | ||
- if any atom value is either `NoKey`, we never call the fetcher—this is the conditional fetching technique we have; | ||
- if you had `SomeKey` and then transitioned to `NoKey`, store's `data` will be also unset; | ||
- you can, in fact, pass another fetcher store as a dependency! It's extremely useful, when you need to create reactive chains of requests that execute one after another, but only when previous one was successful. In this case, if this fetcher store has loaded its data, its key part will be the concatenated `key` of the store. | ||
```ts | ||
@@ -104,0 +105,0 @@ type Options = { |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
35698
684
268