Devtools

[timurmaio]

Hello! React-query just released their devtools extension https://github.com/tannerlinsley/react-query-devtools. Do you have such plans in near future? I'm trying to decide which library to use and I almost desided to use swr, but then I saw react-query devtools. I will be grateful for the answer 😊

[shuding]

Would be great to work on this once we have #172. Callback APIs can be added so a plugin can execute code in:

• beforeRevalidate
• afterRevalidate
• onError
• onLoading
• onSuccess
• onFocus
• ...

Therefore, we can create devtools/loggers/etc. on top of SWR.

[corysimmons]

I'm in the exact same place. SWR's API > react-query's API, but I saw react-query-devtools and was really close to being swayed.

[AshishKapoor]

FYI here's what I found. https://github.com/jjordy/swr-devtools

[corysimmons]

Since this thread was created @shuding & others have introduced a middleware layer to SWR:

• [RFC] Plugin / middleware #1030
• Middleware #1160

It looks like @koba04 is currently experimenting with some DevTools: https://github.com/koba04/swr-devtools

You can get the Chrome Extension here: https://chrome.google.com/webstore/detail/swr-devtools/liidbicegefhheghhjbomajjaehnjned

Thanks for all your work on this @shuding and @koba04 ! Very excited!

[rendinjast]

Hi.
I'm currently working on a devtools based on react-query devtools.
please check it out and if there's any suggestion/idea/issue i will be glad to hear. thanks.

code: https://github.com/rendinjast/swr-devtools
demo: https://codesandbox.io/s/goofy-microservice-ehhkn

[corysimmons]

@rendinjast Very pretty! 👏 How does it compare to the features @koba04's tool offers?

Also, could you make it available as a Chrome Extension?

[rendinjast]

@corysimmons thank you.

Honesty, when I decided to develop it, I didn't know there's a DevTools for SWR.

Correct me if I'm wrong. I think @koba04's tool is based on handling the cache, but what I did is using Callback APIs in middleware, and it's a lot easier to add feature.
For now besides actions and history there's not much difference. But my goal is to make it as powerful as react-query devtools.
UI is already created, and it's very clean, so I can focus on functionality.

Yes I can, but currently my plan is adding more features. Maybe in the future.

---

Edit: v0.0.4 added feature: history list & Options Explorer

[koba04]

We've had SWRDevTools now 🚀
https://swr.vercel.app/docs/advanced/devtools