{"id":16295668,"url":"https://github.com/hamlim/simple-cache","last_synced_at":"2025-03-20T04:31:07.241Z","repository":{"id":39916360,"uuid":"275483125","full_name":"hamlim/simple-cache","owner":"hamlim","description":"A simple react cache implementation","archived":false,"fork":false,"pushed_at":"2025-01-12T01:16:57.000Z","size":36987,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-17T14:48:59.479Z","etag":null,"topics":["cache","react","server-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hamlim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-28T01:27:01.000Z","updated_at":"2025-01-12T01:16:53.000Z","dependencies_parsed_at":"2022-09-21T04:41:51.099Z","dependency_job_id":"a7f21d1d-a632-4e14-9ba5-365ef9da8ba9","html_url":"https://github.com/hamlim/simple-cache","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"hamlim/template-react-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fsimple-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fsimple-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fsimple-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fsimple-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hamlim","download_url":"https://codeload.github.com/hamlim/simple-cache/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244552277,"owners_count":20471044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cache","react","server-components"],"created_at":"2024-10-10T20:19:27.576Z","updated_at":"2025-03-20T04:31:06.868Z","avatar_url":"https://github.com/hamlim.png","language":"TypeScript","readme":"# `@matthamlin/simple-cache`\n\nA simple react-cache implementation that works for both Server Components and\nClient Components!\n\n## API\n\n```tsx\n// For use on the client, or in client components during SSR\nimport { useCache } from '@matthamlin/simple-cache/client'\n\nlet cache = new Map()\n\ninterface Result {\n  something: boolean\n}\n\nfunction useFetch(endpoint) {\n  return useCache\u003cResult\u003e(cache, endpoint, () =\u003e\n    fetch(endpoint).then((data) =\u003e data.json()),\n  )\n}\n```\n\nOr with Server Components (experimental):\n\n```tsx\nimport { useCache } from '@matthamlin/simple-cache/server'\n\nlet cache = new Map()\n\ninterface Result {\n  something: boolean\n}\n\nfunction useData(endpoint) {\n  return useCache\u003cResult\u003e(cache, endpoint, () =\u003e\n    fetch(endpoint).then((res) =\u003e res.json()),\n  )\n}\n```\n\n### `useCache` Arguments:\n\n- `cache` - A cache, expects the same api as a `Map`\n- `key` - A unique key (string) to index the cache by\n- `miss` - A function that returns a promise to suspend (function)\n\n### Recipes:\n\n#### Sharing a cache between the server and the client:\n\n\u003c!-- prettier-ignore --\u003e\n\u003e **Note** \n\u003e I haven't done extensive testing with this approach, but it could\n\u003e work!\n\nThe `server` entrypoint also exports a `serializeCache` function that takes in\nthe `cache` and returns a stringified representation of the cache. It's up to\nyou to pass that data down to the client, one possible approach is a `\u003cscript\u003e`\ntag injected alongside the component that suspended on the server!\n\nOn the client, you can import `deserializeCache` from the `client` entrypoint\nand pass that stringified representation to it to get back the `cache` which you\ncan pass through to all `useCache` calls.\n\nAs long as the keys are equivalent, this should allow you to avoid double\nfetching on the client.\n\n\u003c!-- prettier-ignore --\u003e\n\u003e **Note**\n\u003e This doesn't yet work for _pending_ `useCache` calls, not that I'd\n\u003e expect the server to flush those to the client 🤔\n\n### Built Using:\n\n- Typescript\n- Babel\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamlim%2Fsimple-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamlim%2Fsimple-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamlim%2Fsimple-cache/lists"}