gilbarbara / react-inlinesvg

An SVG loader component for ReactJS

Home Page:https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unable to have the cache working

mlegait opened this issue Β· comments

Describe the bug
I'm not able to have the cache working. Even if the same URL is targeted, the same icon is downloaded again and again.

To Reproduce

Here is a piece of my component:

import SVG from 'react-inlinesvg';
// [...]
  <SVG
    src={`${iconsBaseUrl}/${glyph}.svg`}
    title={alt}
    cacheRequests
    onLoad={(src, hasCache) => console.log(src, hasCache)}
    {...rest}
  />

So I've set cacheRequests to true. Confirmed in the Components tab of React DevTools:
image

But here is what I can see in the network tab of Chrome DevTools:
Image_1021_1601_52
And here is what I can see in the console:
image
So hasCacheis false.

Expected behavior
Each icon should be downloaded only once and cached so that they're not downloaded again.

Maybe it's just me not understanding how it's supposed to work. In that case, could you explain it to me? How can I check what's in the cacheStore you're talking about in the README?
Thank you very much for your help πŸ™

Run npx envinfo --system --binaries

  System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 2.41 GB / 15.81 GB
  Binaries:
    Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.1.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.7.0 - C:\Program Files\nodejs\npm.CMD
$ yarn workspace @prosretail/elements info -R react-inlinesvg
└─ react-inlinesvg@npm:3.0.1
   β”œβ”€ Instances: 1
   β”œβ”€ Version: 3.0.1
   β”‚
   └─ Dependencies
      β”œβ”€ exenv@npm:^1.2.2 β†’ npm:1.2.2
      └─ react-from-dom@npm:^0.6.2 β†’ npm:0.6.2

Hey @mlegait

The cache is for the session and not persistent between reloads.
You could set a rule in a service worker to add them to the Cache Storage, but this is beyond the scope of this library.

Yes, sorry for the trouble. I misunderstood the behavior πŸ˜…
Thank you for this library πŸ™