Replies: 1 comment 6 replies
-
|
Hey @devnomic, yes, it sounds like the second approach is what you want in this case. This takes advantage of automatic caching - each atom instance holds a cached query result. You can then control the lifetime of these caches with TTL. For example: const userProfileAtom = atom("userProfile", (userId: number) => {
const url = `https://jsonplaceholder.typicode.com/users/${userId}`;
const promise = fetch(url).then((result) => result.json());
return api(promise);
}, { ttl: 60000 }); // keep unused users in memory for 1 minuteIons take params too btw, after the first AtomGetters argument const exampleIon = ion('example', ({ get }, myParam: string) => ...)Without params, the atom is a singleton - only one atom instance is ever created. If you need more control over the cache, a singleton gives you that, but you'd have to implement all the caching logic manually. I've never needed this. If you don't want to have to pass params every time, you can create a selector that does it for you: const getUserProfile = ({ get }: AtomGetters) => get(userProfileAtom, [get(userIdAtom)])
// then in a component:
const { data } = useAtomSelector(getUserProfile)I use this all the time, but (very important) note that |
Beta Was this translation helpful? Give feedback.
-
|
Another question, how to make the atom typesafe for user profile? interface UserProfile {
name: string;
email: string;
}
// This obviously not working
const userProfileAtom = atom<UserProfile>(
"userProfile",
(userId: number) => {
const url = `https://jsonplaceholder.typicode.com/users/${userId}`;
const promise = fetch(url).then((result) => result.json());
return api(promise);
}
);or perhaps like this since this works? const userProfileAtom = atom("userProfile", (userId: number) => {
const url = `https://jsonplaceholder.typicode.com/users/${userId}`;
const promise: Promise<UserProfile> = fetch(url).then((result) =>
result.json()
);
return api(promise);
}); |
Beta Was this translation helpful? Give feedback.
-
|
Ooh. You basically got it. Just add function injectInvalidateInterval(ms = 5000) {
const instance = injectSelf();
injectEffect(() => {
const intervalId = setInterval(() => {
instance.invalidate();
}, ms);
return () => clearInterval(intervalId);
}, []);
}Then use it like so: const priceAtom = atom("price", (symbol: string) => {
const url = `https://jsonplaceholder.typicode.com/users/${symbol}`;
const promise = fetch(url).then((result) => result.json());
injectInvalidateInterval(5000);
return api(promise);
});
Yeah your second example is exactly how I'd do it. Zedux's types try really hard to auto-infer everything. So the easiest way to type things is to feed Zedux good types. The trade-off of that is it can be tedious to manually type some things. But I believe this'll do it if you need: import { api, atom, PromiseState } from '@zedux/react';
const userProfileAtom = atom<
PromiseState<UserProfile>,
[userId: number],
Record<string, never>
>("userProfile", (userId: number) => {
const url = `https://jsonplaceholder.typicode.com/users/${userId}`;
const promise = fetch(url).then(result => result.json());
return api(promise);
});Ideally you should never need to do this, but I'd be interested to know any exceptions you find. If partial inference or keyed generics land in TypeScript, it'll make manual typing a lot easier in Zedux. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks again! |
Beta Was this translation helpful? Give feedback.
-
|
@bowheart |
Beta Was this translation helpful? Give feedback.
-
|
A utils package is definitely something we should consider. I've made #143 to track that. |
Beta Was this translation helpful? Give feedback.
-
Hi,
I am trying to derive atom using ion like this.
While this works, it always trigger suspense when fetching user profile.
https://codesandbox.io/s/zedux-ion-s6w4w0?file=/src/App.tsx
If i'm using normal atom with param, this works as intended / the results are cached.
https://codesandbox.io/s/zedux-ion-2-utxibv?file=/src/App.tsx
Is it possible to achieve same result using ion?
Or is it generally better to use the second approach (atom with params) when using zedux?
Thank you
Beta Was this translation helpful? Give feedback.
All reactions