feat: use the middleware instead of injecting a cache

[koba04]

This approach has some problems, so I won't take this approach. But I created a PR to put my works. SWR's middleware allows us to a hook for useSWR hooks, which seems to be a good place for SWRDevtools. But this has the following problems.

• the return values of useSWR are monitored by swr to optimize re-rendering, which is implemented by getters. So if we get the data for SWRDevtools, it is marked as "used" and causes extra re-rendering. refs https://github.com/koba04/swr-devtools/pull/37#issuecomment-972731776.
• It's difficult to get key strings in middlewares. We can use unstable_serialize, but how should I handle useSWRInfinite?

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/koba04/swr-devtools/GXQ6dicETieXm4eki9xQ713bJS7h
✅ Preview: https://swr-devtools-git-stop-injecting-cache-koba04.vercel.app

[shuding]

Thanks for working on this! Here are my thoughts:

So if we get the data for SWRDevtools, it is marked as "used" and causes extra re-rendering

That is indeed a problem. We can probably monitor data updates via a listener or something else, but we can't use useDebugValue() without a re-render. Maybe this can be an option that users can switch on/off, and normally in development it's OK to have extra re-renders, React does the same too (https://github.com/facebook/react/issues/15074).

but how should I handle useSWRInfinite?

useSWRInfinite is indeed a special case, do you think if the unstable_serialize exported from swr/infinite helps?

[koba04]

Thank you for your comments!

Maybe this can be an option that users can switch on/off, and normally in development it's OK to have extra re-renders, React does the same too (facebook/react#15074).

Yeah, that's right. I think it seems to be ok. But I'm a little worried about it because I often see that the behavior of React makes developers confused. I think isValidating causes many extra rendering, so it might be acceptable if SWRDevTools only tracks data and error.

useSWRInfinite is indeed a special case, do you think if the unstable_serialize exported from swr/infinite helps?

That might be useful, but is there any way to know whether useSWRNext is useSWRInfinite or not? Do I have to test this by confirming if the data has the size and setSize properties?

[shuding]

That might be useful, but is there any way to know whether useSWRNext is useSWRInfinite or not?

I think the most "correct" way of doing so is by getting the middleware option and see if it has an infinite middleware (which is exported from swr/infinite).