Computed properties fire when an action is emitted

[onionhammer]

I'm attempting to use computed properties to preserve fetch results and createContextStore;

...
getSomething1: computed((state) => fetch("something1", state.date)),
getSomething2: computed((state) => fetch("something2", state.date)),
getSomething3: computed((state) => fetch("something3", state.date)),
...

I'm then consuming only 1 of the computed properties; getSomething1, everything works perfectly until I change the state of 'date', then all three getSomething (1, 2, 3) fire off fetches even though I'm only using the first one anywhere.

[ctrlplusb]

Hey @onionhammer

That definitely should not be the case unless all the properties are currently being accessed by one of your components.

Would you mind creating a minimal reproduction for me on codesanbox? This will help me investigate it quicker for you.

👍

[onionhammer]

@ctrlplusb Thanks for the response

I reproduced it in this repository: https://github.com/onionhammer/repro-easypeasy

[ctrlplusb]

Thanks for the report @onionhammer

The investigation into this has led me to a really great insight. I'll definitely be improving this experience, which will resolve the issue you are experiencing.

As a side note though; I don't recommend putting your fetch requests within a computed property. Computed properties should be idempotent, and therefore should not contain side effects.

Also, a question regarding this. It seems that you are trying to encapsulate the fetch requests within Easy Peasy, but do you have any intention of storing the results of the request in your store state?

Based on the answer to my question I will recommend an alternative approach. 👍

[onionhammer]

@ctrlplusb I've already switched to using react-query to cache results, but I'm definitely open to recommendations on how I can better use easy-peasy to do this stuff ;)

My initial goal was to store the Promise itself in the computed property, so if multiple things await it it will return a precomputed result if it's already been fetched

[ctrlplusb]

Using react-query sounds like a much better fit for what you were attempting, by way of the code you showed me. 👍