react-three-fiber icon indicating copy to clipboard operation
react-three-fiber copied to clipboard

Add ability to use a cache key for useLoader

Open mynameisgump opened this issue 1 year ago • 2 comments

In the useLoader function in hooks.tsx, currently the URL is used as the key in order to cache the gltf using the suspend function from the suspend-react library. My problem is that I have a url with a changing saastoken, so each time I go to the page it will re-download and cache a new version of the file. Would it be possible to have an optional cache key that's different to the URL which it would check for and return instead? That way even if the url is different due to some form of api auth it would still return the cached glb when the function is called again. I've written a somewhat similar hook to useGLTF from the react-drei library that uses the same idea to cache the object:

const useNewLoader = ({ url, cacheKey }: IUseNewLoader) =>
  suspend(
    async () =>
      new Promise<GLTF>((res, reject) => {
        gltfLoader.load(url, (data) => {
          if (data.scene) Object.assign(data, buildGraph(data.scene));
          res(data);
        });
      }).finally(() => (gltfLoader as any).dispose?.()),
    ['glb', cacheKey]
  ) as GLTF & ObjectMap;

export default useNewLoader;

mynameisgump avatar Jan 10 '24 15:01 mynameisgump

You can append a query url with a cache key currently, although cache behavior in general could be bettered with React 19. cc @drcmda

CodyJasonBennett avatar Apr 26 '24 04:04 CodyJasonBennett