radiant vapor
For some pages on our website that are not changed frequently, we tend to cache the API response. But we also want to be able to revalidate it on-demand, not a time-based fashion. Thus we thought it woule be awesome if we can cache the API response somewhere and use it across our components and pages, and then have an Endpoint to reset that cache.
What can we do for this?
In Next.js we had this Cache.jsx file. We used fs to read/write to files and it was 100 times faster than API calls (100ms for API call, 1ms for IO). We tried to use that for Qwik, but we get a lot of nasty errors complaning that fs is externalized by vite, or other errors.
wheat moss
Maybe this can help you: https://discord.com/channels/842438759945601056/1129150515373158470
blazing sierra
@radiant vapor you have to remember that client and server builds are intertwined, so if there's code that should not be sent to the client, you can do something like if (!isServer) return
radiant vapor
@wheat moss I saw your question. But it lacks a sample code. I couldn't figure out how you did it.
@blazing sierra , as much as I know, Endpoints are not like that. An endpoint only runs on the server and would return the JSON. Is that correct?
blazing sierra
<@105886181710913536> , as much as I know, Endpoints are not like that. An endpo...
Yes that should indeed be so
radiant vapor
@blazing sierra , I have created a MRE. https://stackblitz.com/edit/qwik-starter-czswbp?file=src%2Fcache.jsx,src%2Froutes%2Findex.tsx
blazing sierra
But the fact that you got errors means something leaked through somewhere
radiant vapor
It works great in the development environment, but when I want to build it, I get errors related to fs
radiant vapor
Qwik is awesome, but these bugs are becoming weary for us π
blazing sierra
π
radiant vapor
Can you guide me on how to make this a memory-cache, instead of a File-system cache? That would not need the fs anymore.
blazing sierra
Qwik is still quite a bit into move fast and break things territory it seems. I think there should be a test for the playground working at least
I use node-cache for that sort of thing, can also do memory
Mind you, it could be that for problem wouldn't be solved
I'll take a look at your MRE (BTW what does MRE stand for?)
radiant vapor
Basically, I use routeLoader$ to get data from cache, or from API. And the cache backend is IO. Thus I need to use fs for it. I have also created an endpoint at /clear-cache to clear it (surprise!). That also works with fs. I'll take a look at node-cache. Thank you.
MRE = Minimal Reproducible Example
blazing sierra
@radiant vapor how do I reproduce the error? When I run in dev it works, and when I run in preview it works?
blazing sierra
npm run build.types
npm run build.client
npm run lint
> build.client
> vite build
vite v4.3.5 building for production...
β 55 modules transformed.
dist/q-manifest.json 16.93 kB β gzip: 3.09 kB
dist/build/q-1136a459.css 1.35 kB β gzip: 0.57 kB
dist/build/q-34b1f157.js 0.10 kB β gzip: 0.11 kB
dist/build/q-8cf8beb8.js 0.11 kB β gzip: 0.11 kB
dist/build/q-2cce0054.js 0.13 kB β gzip: 0.13 kB
dist/build/q-1d81ca57.js 0.19 kB β gzip: 0.15 kB
dist/build/q-71ee351d.js 0.20 kB β gzip: 0.16 kB
dist/build/q-f0be4a8c.js 0.22 kB β gzip: 0.14 kB
dist/build/q-173b2382.js 0.24 kB β gzip: 0.19 kB
dist/build/q-0f622801.js 0.27 kB β gzip: 0.22 kB
dist/build/q-6465778a.js 0.29 kB β gzip: 0.21 kB
dist/build/q-8e9efe08.js 0.41 kB β gzip: 0.29 kB
dist/build/q-37535e85.js 0.41 kB β gzip: 0.29 kB
dist/build/q-ae67a3e7.js 0.54 kB β gzip: 0.32 kB
dist/build/q-92d07eaf.js 0.67 kB β gzip: 0.40 kB
dist/build/q-ca4cce81.js 0.72 kB β gzip: 0.48 kB
dist/build/q-3a3ac8d0.js 0.75 kB β gzip: 0.46 kB
dist/build/q-ef0a6c07.js 0.88 kB β gzip: 0.55 kB
dist/build/q-4912fa17.js 0.96 kB β gzip: 0.60 kB
dist/build/q-88d1893e.js 1.01 kB β gzip: 0.64 kB
dist/build/q-6be5094b.js 1.19 kB β gzip: 0.62 kB
dist/service-worker.js 2.54 kB β gzip: 1.21 kB
dist/build/q-8ec0f012.js 2.71 kB β gzip: 1.24 kB
dist/build/q-f76de266.js 3.04 kB β gzip: 1.48 kB
dist/build/q-88a26eb0.js 8.00 kB β gzip: 3.77 kB
dist/build/q-4f39ac4f.js 47.55 kB β gzip: 19.35 kB
β built in 1.98s
β Built client modules
β Type checked
β Lint checked
Missing an integration
γ» Use npm run qwik add to add an integration
γ» Use npm run preview to preview the build
Yeah, I updated it right now, and oddly it can be built in this example
Yet in my own code at the company, I get this error when I run npm run build:
"existsSync" is not exported by "__vite-browser-external", imported by "src/Base/Cache.jsx".
And in my client, for the event listeners I get this error:
log.js:9 QWIK ERROR Error: Module "fs" has been externalized for browser compatibility. Cannot access "fs.existsSync" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
