koba04 / swr-devtools

A DevTool for SWR
https://swr-devtools.vercel.app
MIT License
221 stars 3 forks source link

Support SWR v1 #2

Closed koba04 closed 3 years ago

koba04 commented 3 years ago

swr has already published the version of v1 beta at the npm registry. the v1 version is no longer exposing a global cache object, so I have to find out another way to access the swr cache object.

I guess swr-devtools would require to receive a cache object through an argument like the following.

window.__SWR_DEVTOOLS_EXTENSION__(cache)
koba04 commented 3 years ago

The Cache interface of swr v1 only has get, set, and delete methods, which means I cannot subscribe changes in the Cache and cannot list all cache data. https://github.com/vercel/swr/blob/master/src/types.ts#L170-L174

For that reasons, I would have to wrap a cache to add capabilities like subscribe() and keys() in __SWR_DEVTOOLS__.launch(cache).

koba04 commented 3 years ago

I've started supporting v1 at https://github.com/koba04/swr-devtools/commit/90a977514d570c35b1157febe88b076d283f5a95. I've noticed that v1 doesn't expose keys() as an interface, so I cannot retrieve all cache data before opening the devtool panel.

koba04 commented 3 years ago

It seems to be hard to support the custom cache feature in v1 unless developers write their own injecting spy functionality into all mutations.

shuding commented 3 years ago

Hey, I just found this project and it's looking great! Would love to contribute as much as I can.

Do you think if it's possible to build it as a middleware?

<SWRConfig value={{ middlewares: [swrdevtools] }}>

Since SWRConfig supports extending, you can make the above a component (so you can inject the UI there too):

<SWRDevTools>
  <MainApp />
</SWRDevTools>

The good part is, you can access to the active cache inside a middleware (config.cache), and you can provide a custom cache implementation as well by overriding config.cache.

Also, since the import { cache } from 'swr' is gone in 1.0, a way to get the global cache is SWRConfig.default.cache.

koba04 commented 3 years ago

@shuding Thank you for being interested in this project! Yeah, That's a great idea for v1 support. I didn't come up with using config.cache, and it would be the best place to handle a cache. That also gives us the capability of observing fetch requests.

One thing that is not clear is that how to support mutation from a devtool panel. (#8) To mutate a cache, SWR Devtools has to keep the reference of the mutate method to support this, but middlewares would not be able to get the reference. So I have to find a way to pass the mutate method to the middleware.

shuding commented 3 years ago

Update: I'm working on a new hook to expose the mutate method in vercel/swr#1361, it should cover this use case (as well as many other pain points).

koba04 commented 3 years ago

@shuding Thank you! That looks amazing and I think this covers my use case 👍 I started considering that swr-devtools only supports v1 in the near future.