How to cache using ion to prevent suspense?

[devnomic]

Hi,

I am trying to derive atom using ion like this.

const userIdAtom = atom("userId", 1);

const userProfileAtom = ion("userProfile", ({ get }) => {
  const userId = get(userIdAtom);
  const url = `https://jsonplaceholder.typicode.com/users/${userId}`;
  const promise = fetch(url).then((result) => result.json());
  return api(promise);
});

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.

const userIdAtom = atom("userId", 1);

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);
});

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

[bowheart]

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 minute

Ions 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 useAtomSelector doesn't trigger suspense currently. It's possible to make a custom hook that does though. Here's an example. I've been really wanting this in Zedux proper for a while now and actually I think I'm going to spend some time working on it today.

[devnomic]

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);
});

[bowheart]

Ooh. invalidateInterval is a cool idea. I'll keep that in mind for the @zedux/query package we're planning on making.

You basically got it. Just add injectSelf(). Here's a custom injector example:

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);
});

how to make the atom typesafe

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.

[devnomic]

Thanks again!

[joprice]

@bowheart useSuspendingSelector would be a great addition! I just copied it over and made use of it. Maybe this and other ones found in the discussions could go into a utils package.

[bowheart]

A utils package is definitely something we should consider. I've made #143 to track that.