cache

deno.lock

···
 {
   "version": "5",
   "specifiers": {
+    "npm:@solid-primitives/resource@~0.4.2": "0.4.2_solid-js@1.9.9__seroval@1.3.2",
     "npm:@tailwindcss/vite@^4.1.13": "4.1.13_vite@7.1.5__picomatch@4.0.3",
     "npm:solid-devtools@~0.34.3": "0.34.3_solid-js@1.9.9__seroval@1.3.2_vite@7.1.5__picomatch@4.0.3_@babel+core@7.28.4",
     "npm:solid-js@^1.9.9": "1.9.9_seroval@1.3.2",
···
         "@solid-primitives/rootless",
         "@solid-primitives/static-store",
         "@solid-primitives/utils",
+        "solid-js"
+      ]
+    },
+    "@solid-primitives/resource@0.4.2_solid-js@1.9.9__seroval@1.3.2": {
+      "integrity": "sha512-NY3M4adgLUS/jZLbLOT8N61oIWlCg2XlOBVvRMjNc61JyrzKTiiy9Khurjikxetjm0nt0PZv4R83lwAkbFjRkw==",
+      "dependencies": [
         "solid-js"
       ]
     },
···
   "workspace": {
     "packageJson": {
       "dependencies": [
+        "npm:@solid-primitives/resource@~0.4.2",
         "npm:@tailwindcss/vite@^4.1.13",
         "npm:solid-devtools@~0.34.3",
         "npm:solid-js@^1.9.9",

package.json

···
     "vite-plugin-solid": "^2.11.8"
   },
   "dependencies": {
+    "@solid-primitives/resource": "^0.4.2",
     "solid-js": "^1.9.9"
   }
 }

src/App.tsx

···
+import { makeCache } from "@solid-primitives/resource";
 import {
 	type Component,
 	createResource,
···
 		username: "karitham",
 		range: "all_time",
 	});
-	const [artistRes] = createResource<ArtistStats, Settings>(settings, (set) =>
-		artists(set.username, undefined, set.range),
+	const [artistFetcher] = makeCache(
+		(set: Settings) => artists(set.username, undefined, set.range),
+		{
+			storage: localStorage,
+			sourceHash(source) {
+				return `artists-${JSON.stringify(source)}`;
+			},
+		},
 	);
-	const [groupsRes] = createResource<ReleaseGroupsStats, Settings>(
-		settings,
-		(set) => releaseGroups(set.username, undefined, set.range),
+	const [artistRes] = createResource(settings, artistFetcher);
+	const [groupsFetcher] = makeCache(
+		(set: Settings) => releaseGroups(set.username, undefined, set.range),
+		{
+			storage: localStorage,
+			sourceHash(source) {
+				return `groups-${JSON.stringify(source)}`;
+			},
+		},
 	);
+	const [groupsRes] = createResource(settings, groupsFetcher);
 
 	return (
 		<div class="bg-black min-h-screen text-white p-8">
···
 };
 
 const ArtistsItem: Component<{ artist: ArtistStatsArtist }> = (props) => {
-	const [image] = createResource(async () => {
-		if (!props.artist.artist_mbid) {
-			return null;
-		}
+	const [imageFetcher] = makeCache(
+		async (artist: ArtistStatsArtist) => {
+			if (!artist.artist_mbid) {
+				return null;
+			}
 
-		return await getWikidataURL(props.artist.artist_mbid).then((s) =>
-			s ? getWikidataThumbnail(s) : null,
-		);
-	});
+			return await getWikidataURL(artist.artist_mbid).then((s) =>
+				s ? getWikidataThumbnail(s) : null,
+			);
+		},
+		{
+			storage: localStorage,
+		},
+	);
+	const [image] = createResource(props.artist, imageFetcher);
 
 	return (
 		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">
···
 };
 
 const ReleaseGroupItem: Component<{ group: ReleaseGroupsGroup }> = (props) => {
-	const [image] = createResource(async () => {
-		if (!props.group.caa_release_mbid) {
-			return null;
-		}
-		const result = await getReleaseImageURL(
-			"release",
-			props.group.caa_release_mbid,
-		);
-		return result[0]?.image.replace("http://", "https://");
-	});
+	const [imageFetcher] = makeCache(
+		async (group: ReleaseGroupsGroup) => {
+			if (!group.caa_release_mbid) {
+				return null;
+			}
+			const result = await getReleaseImageURL(
+				"release",
+				group.caa_release_mbid,
+			);
+			return result[0]?.image.replace("http://", "https://");
+		},
+		{
+			storage: localStorage,
+		},
+	);
+	const [image] = createResource(props.group, imageFetcher);
 
 	return (
 		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">