EC

Effect Community•10mo ago

Kofi

Trouble with Effect Cache and React Router 7/Remix Server-Side Loaders Integration

Hello I can't figure out what I'm doing wrong when using the CacheCache module with react-router 7react-router 7/remixremix server-side loaders.
I've created a repro here: https://github.com/stefanoCrmg/effect-cache-repro

What I would expect is to have a long lasting cache as long as the dev server is up.
Navigating to localhost:5173/pokemon/pikachulocalhost:5173/pokemon/pikachu should only hit the PokemonAPI once on the first page load, any force refresh of the page should not hit the PokemonAPI but instead return the cached data.

What am I missing? Why do I always hit the API after each page refresh? I know for sure that this possible pretty trivialy using other caching libraries like @epic-web/cachified@epic-web/cachified with a very similar setup (a *.server.ts*.server.ts file exporting the cache object).

Page: https://github.com/stefanoCrmg/effect-cache-repro/blob/main/app/routes/pokemon.tsx
Cache object used by the loader: https://github.com/stefanoCrmg/effect-cache-repro/blob/main/app/services/Pokemon/pokemon-cache.server.ts
Very simple effect for calling the API and used in Cache.lookupCache.lookup: https://github.com/stefanoCrmg/effect-cache-repro/blob/main/app/services/Pokemon/repository/getPokemonByName.ts

I'm guessing this might be because Cache.makeCache.make returns an

Effect

Effect

itself whereas other in-memory cache libraries are just a "glorified" singleton/SetSet, but I can't quite understand what I'm supposed to do here...