Demo

34 | 35 | ); 36 | } 37 | ``` 38 | 39 | It's ideal to add a `` at the root of your application, but you can also do it granularly such that different parts of the application don't have to share the same cache. 40 | 41 | ```jsx 42 | <> 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ``` 51 | 52 | ### `createCachedResource` 53 | 54 | A primitive similar to `createResource`, except `createCachedResource` works differently. 55 | 56 | For `createCacheResource` to be "cached", it requires a `` as an ancestor component, and it needs a "key" so it knows where to access or share its cached data. 57 | 58 | `createCachedResource` also returns `data` and `isFetching`: `data` is a `Resource` while `isFetching` is a reactive boolean signal. 59 | 60 | ```jsx 61 | import { createCachedResource } from 'solid-cache'; 62 | 63 | function Profile() { 64 | const { data, isFetching } = createCachedResource({ 65 | key: '/profile', 66 | get: () => getUserProfile(), 67 | }); 68 | 69 | return ( 70 |

75 | }> 76 | 77 | 78 | 79 |

80 | ); 81 | } 82 | ``` 83 | 84 | `createCachedResource` can also accept a `source` like `createResource` however it won't refetch if the `key` remains unchanged. 85 | 86 | ```jsx 87 | const { data, isFetching } = createCachedResource({ 88 | source: () => id(), 89 | key: (currentId) => `/user/${currentId}`, 90 | get: (currentID) => getUser(currentId), 91 | }); 92 | ``` 93 | 94 | If there are multiple `createCachedResource` instances that share the same key, only one is going to fetch and the rest will re-use the same cached value as the fetching instance. 95 | 96 | ### `useCacheBoundaryRefresh` 97 | 98 | `useCacheBoundaryRefresh` returns a function that makes all `createCachedResource` instances to simultaneously refresh in the same ``. 99 | 100 | ```js 101 | function RefreshUser() { 102 | const refresh = useCacheBoundaryRefresh(); 103 | 104 | return refresh()} /> 105 | } 106 | ``` 107 | 108 | However, if you want to "refresh in the background" while keeping the old data, you can call `refresh(true)` instead, this way, the UI doesn't need to show a loading UI. 109 | 110 | ### `fetch` 111 | 112 | A wrapper for `createCachedResource` and the native `fetch` API. 113 | 114 | ```jsx 115 | import { fetch } from 'solid-cache'; 116 | 117 | function DogImage() { 118 | const { data, isFetching } = fetch('https://dog.ceo/api/breed/shiba/images/random').json(); 119 | 120 | return ( 121 | 122 |

75 | }> 76 | 77 | 78 | 79 |

126 | 127 | ); 128 | } 129 | ``` 130 | 131 | ## Sponsors 132 | 133 | ![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true) 134 | 135 | ## License 136 | 137 | MIT © [lxsmnsyc](https://github.com/lxsmnsyc) 138 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@biomejs/biome/configuration_schema.json", 3 | "files": { 4 | "ignore": ["node_modules/**/*"] 5 | }, 6 | "vcs": { 7 | "useIgnoreFile": true 8 | }, 9 | "linter": { 10 | "enabled": true, 11 | "ignore": ["node_modules/**/*"], 12 | "rules": { 13 | "recommended": true, 14 | "a11y": { 15 | "noAriaHiddenOnFocusable": "off", 16 | "useIframeTitle": "warn", 17 | "useKeyWithClickEvents": "warn", 18 | "useKeyWithMouseEvents": "warn" 19 | }, 20 | "complexity": { 21 | "noForEach": "error", 22 | "noVoid": "off", 23 | "useOptionalChain": "warn", 24 | "useSimplifiedLogicExpression": "error" 25 | }, 26 | "correctness": { 27 | "noConstantMathMinMaxClamp": "error", 28 | "noInvalidNewBuiltin": "error", 29 | "noNewSymbol": "error", 30 | "noNodejsModules": "off", 31 | "noUndeclaredDependencies": "off", 32 | "noUndeclaredVariables": "error", 33 | "noUnusedFunctionParameters": "error", 34 | "noUnusedImports": "error", 35 | "noUnusedPrivateClassMembers": "error", 36 | "noUnusedVariables": "error", 37 | "useArrayLiterals": "error" 38 | }, 39 | "performance": { 40 | "noAccumulatingSpread": "error", 41 | "useTopLevelRegex": "error" 42 | }, 43 | "security": { 44 | "noGlobalEval": "off" 45 | }, 46 | "style": { 47 | "noArguments": "error", 48 | "noImplicitBoolean": "error", 49 | "noInferrableTypes": "error", 50 | "noNamespace": "error", 51 | "noNegationElse": "error", 52 | "noRestrictedGlobals": "error", 53 | "noShoutyConstants": "error", 54 | "noUnusedTemplateLiteral": "error", 55 | "noUselessElse": "error", 56 | "noVar": "error", 57 | "noYodaExpression": "error", 58 | "useAsConstAssertion": "error", 59 | "useBlockStatements": "error", 60 | "useCollapsedElseIf": "error", 61 | "useConsistentArrayType": "error", 62 | "useConsistentBuiltinInstantiation": "error", 63 | "useConst": "error", 64 | "useDefaultParameterLast": "error", 65 | "useEnumInitializers": "error", 66 | "useExponentiationOperator": "error", 67 | "useExportType": "error", 68 | "useFragmentSyntax": "error", 69 | "useForOf": "warn", 70 | "useImportType": "error", 71 | "useLiteralEnumMembers": "error", 72 | "useNodejsImportProtocol": "warn", 73 | "useNumberNamespace": "error", 74 | "useNumericLiterals": "error", 75 | "useSelfClosingElements": "error", 76 | "useShorthandArrayType": "error", 77 | "useShorthandAssign": "error", 78 | "useShorthandFunctionType": "warn", 79 | "useSingleCaseStatement": "error", 80 | "useSingleVarDeclarator": "error", 81 | "useTemplate": "off", 82 | "useWhile": "error" 83 | }, 84 | "suspicious": { 85 | "noConsoleLog": "warn", 86 | "noConstEnum": "off", 87 | "noDebugger": "off", 88 | "noEmptyBlockStatements": "error", 89 | "noExplicitAny": "warn", 90 | "noImplicitAnyLet": "off", 91 | "noMisrefactoredShorthandAssign": "off", 92 | "noSelfCompare": "off", 93 | "noSparseArray": "off", 94 | "noThenProperty": "warn", 95 | "useAwait": "error", 96 | "useErrorMessage": "error" 97 | } 98 | } 99 | }, 100 | "formatter": { 101 | "enabled": true, 102 | "ignore": ["node_modules/**/*"], 103 | "formatWithErrors": false, 104 | "indentWidth": 2, 105 | "indentStyle": "space", 106 | "lineEnding": "lf", 107 | "lineWidth": 80 108 | }, 109 | "organizeImports": { 110 | "enabled": true, 111 | "ignore": ["node_modules/**/*"] 112 | }, 113 | "javascript": { 114 | "formatter": { 115 | "enabled": true, 116 | "arrowParentheses": "asNeeded", 117 | "bracketSameLine": false, 118 | "bracketSpacing": true, 119 | "indentWidth": 2, 120 | "indentStyle": "space", 121 | "jsxQuoteStyle": "double", 122 | "lineEnding": "lf", 123 | "lineWidth": 80, 124 | "quoteProperties": "asNeeded", 125 | "quoteStyle": "single", 126 | "semicolons": "always", 127 | "trailingCommas": "all" 128 | }, 129 | "globals": [], 130 | "parser": { 131 | "unsafeParameterDecoratorsEnabled": true 132 | } 133 | }, 134 | "json": { 135 | "formatter": { 136 | "enabled": true, 137 | "indentWidth": 2, 138 | "indentStyle": "space", 139 | "lineEnding": "lf", 140 | "lineWidth": 80 141 | }, 142 | "parser": { 143 | "allowComments": false, 144 | "allowTrailingCommas": false 145 | } 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /packages/solid-cache/src/core.ts: -------------------------------------------------------------------------------- 1 | /* @jsxImportSource solid-js */ 2 | import type { JSX, Resource } from 'solid-js'; 3 | import { 4 | createComponent, 5 | createContext, 6 | createMemo, 7 | createRenderEffect, 8 | createResource, 9 | createSignal, 10 | on, 11 | onCleanup, 12 | untrack, 13 | useContext, 14 | } from 'solid-js'; 15 | import { createCache } from './cache'; 16 | import type { CacheData, CacheResult } from './cache-instance'; 17 | import CacheInstance from './cache-instance'; 18 | 19 | function signalToResource( 20 | result: () => CacheResult | undefined, 21 | ): Resource { 22 | const [data] = createResource( 23 | () => result(), 24 | async currentResult => { 25 | if (currentResult.status === 'failure') { 26 | throw currentResult.value; 27 | } 28 | return await currentResult.value; 29 | }, 30 | ); 31 | 32 | return data; 33 | } 34 | 35 | const CacheContext = createContext(); 36 | 37 | export interface CacheBoundaryProps { 38 | children?: JSX.Element; 39 | } 40 | 41 | export function CacheBoundary(props: CacheBoundaryProps): JSX.Element { 42 | const instance = new CacheInstance(); 43 | 44 | onCleanup(() => { 45 | instance.destroy(); 46 | }); 47 | 48 | return createComponent(CacheContext.Provider, { 49 | value: instance, 50 | get children() { 51 | return props.children; 52 | }, 53 | }); 54 | } 55 | 56 | function useCacheContext(): CacheInstance { 57 | const ctx = useContext(CacheContext); 58 | 59 | if (!ctx) { 60 | throw new Error('Missing ``'); 61 | } 62 | 63 | return ctx; 64 | } 65 | 66 | export function useCacheBoundaryRefresh(): (swr?: boolean) => void { 67 | const ctx = useCacheContext(); 68 | 69 | return (swr?: boolean) => { 70 | ctx.refresh(swr); 71 | }; 72 | } 73 | 74 | const cachedResource = createCache(); 75 | 76 | export interface CachedResource { 77 | data: Resource; 78 | isFetching: () => boolean; 79 | } 80 | 81 | export interface CachedResourceOptionsWithSource { 82 | source: () => Source; 83 | key: (currentSource: Source) => string; 84 | get: (currentSource: Source) => Promise; 85 | } 86 | 87 | export interface CachedResourceOptionsWithoutSource { 88 | key: string; 89 | get: () => Promise; 90 | } 91 | 92 | function createCachedResourceWithSource( 93 | options: CachedResourceOptionsWithSource, 94 | ): CachedResource { 95 | const ctx = useCacheContext(); 96 | 97 | const currentSource = createMemo(() => options.source()); 98 | const currentKey = createMemo(() => options.key(currentSource())); 99 | 100 | const [result, setResult] = createSignal>( 101 | ctx.get(cachedResource, untrack(currentKey)), 102 | ); 103 | 104 | // Bind cache to local signal 105 | createRenderEffect(() => { 106 | const targetKey = currentKey(); 107 | 108 | onCleanup(ctx.subscribe(cachedResource, targetKey, setResult)); 109 | 110 | // Sync local signal 111 | setResult(ctx.get(cachedResource, targetKey)); 112 | }); 113 | 114 | function createRecord( 115 | targetKey: string, 116 | targetSource: Source, 117 | swr?: boolean, 118 | ): void { 119 | // Dedupe when there's an on-going fetch 120 | if (ctx.isFetching(cachedResource, targetKey)) { 121 | return; 122 | } 123 | 124 | const fetchedResult = options.get(targetSource); 125 | 126 | fetchedResult.then( 127 | value => { 128 | ctx.set(cachedResource, targetKey, { 129 | data: { 130 | status: 'success', 131 | value, 132 | }, 133 | isFetching: false, 134 | }); 135 | }, 136 | value => { 137 | ctx.set(cachedResource, targetKey, { 138 | data: { 139 | status: 'failure', 140 | value, 141 | }, 142 | isFetching: false, 143 | }); 144 | }, 145 | ); 146 | 147 | if (swr) { 148 | ctx.set(cachedResource, targetKey, { 149 | data: ctx.get(cachedResource, targetKey)?.data, 150 | isFetching: true, 151 | }); 152 | } else { 153 | ctx.set(cachedResource, targetKey, { 154 | data: { 155 | status: 'pending', 156 | value: fetchedResult, 157 | }, 158 | isFetching: true, 159 | }); 160 | } 161 | } 162 | 163 | // Manage fetcher 164 | createRenderEffect( 165 | on(currentKey, keyValue => { 166 | const currentResult = ctx.get(cachedResource, keyValue); 167 | if (!currentResult.data) { 168 | createRecord(keyValue, untrack(currentSource), false); 169 | } 170 | }), 171 | ); 172 | 173 | // Manage fetcher by refresh action 174 | createRenderEffect(() => { 175 | onCleanup( 176 | ctx.trackRefresh(swr => { 177 | createRecord(untrack(currentKey), untrack(currentSource), swr); 178 | }), 179 | ); 180 | }); 181 | 182 | return { 183 | data: signalToResource(() => result().data), 184 | isFetching: () => result().isFetching, 185 | }; 186 | } 187 | 188 | function createCachedResourceWithoutSource( 189 | options: CachedResourceOptionsWithoutSource, 190 | ): CachedResource { 191 | const ctx = useCacheContext(); 192 | 193 | const key = untrack(() => options.key); 194 | 195 | const [result, setResult] = createSignal>( 196 | ctx.get(cachedResource, key), 197 | ); 198 | 199 | // Bind cache to local signal 200 | createRenderEffect(() => { 201 | onCleanup(ctx.subscribe(cachedResource, key, setResult)); 202 | 203 | // Sync local signal 204 | setResult(ctx.get(cachedResource, key)); 205 | }); 206 | 207 | function createRecord(targetKey: string, swr?: boolean): void { 208 | // Dedupe when there's an on-going fetch 209 | if (ctx.isFetching(cachedResource, targetKey)) { 210 | return; 211 | } 212 | 213 | const fetchedResult = options.get(); 214 | 215 | fetchedResult.then( 216 | value => { 217 | ctx.set(cachedResource, targetKey, { 218 | data: { 219 | status: 'success', 220 | value, 221 | }, 222 | isFetching: false, 223 | }); 224 | }, 225 | value => { 226 | ctx.set(cachedResource, targetKey, { 227 | data: { 228 | status: 'failure', 229 | value, 230 | }, 231 | isFetching: false, 232 | }); 233 | }, 234 | ); 235 | 236 | if (swr) { 237 | ctx.set(cachedResource, targetKey, { 238 | data: ctx.get(cachedResource, targetKey)?.data, 239 | isFetching: true, 240 | }); 241 | } else { 242 | ctx.set(cachedResource, targetKey, { 243 | data: { 244 | status: 'pending', 245 | value: fetchedResult, 246 | }, 247 | isFetching: true, 248 | }); 249 | } 250 | } 251 | 252 | const currentResult = ctx.get(cachedResource, key); 253 | if (!currentResult.data) { 254 | createRecord(key, false); 255 | } 256 | 257 | // Manage fetcher by refresh action 258 | createRenderEffect(() => { 259 | onCleanup( 260 | ctx.trackRefresh(swr => { 261 | createRecord(key, swr); 262 | }), 263 | ); 264 | }); 265 | 266 | return { 267 | data: signalToResource(() => result().data), 268 | isFetching: () => result().isFetching, 269 | }; 270 | } 271 | 272 | export function createCachedResource( 273 | options: CachedResourceOptionsWithSource, 274 | ): CachedResource; 275 | export function createCachedResource( 276 | options: CachedResourceOptionsWithoutSource, 277 | ): CachedResource; 278 | export function createCachedResource( 279 | options: 280 | | CachedResourceOptionsWithSource 281 | | CachedResourceOptionsWithoutSource, 282 | ): CachedResource { 283 | if ('source' in options) { 284 | return createCachedResourceWithSource(options); 285 | } 286 | return createCachedResourceWithoutSource(options); 287 | } 288 | --------------------------------------------------------------------------------

32 | {data()} 33 |