Cache the async post data

[Sylvenas]

Hi, first of all thanks for this amazing lib

I have a question, but it took me a long time to solve it, so I came to seek help.

Q1: How to cache the async post data?
Q2: How to show the post data that prefetched in sever side?

Desc:
In the hack news example, clicking the next button will query the next post, and if we add a previous button, click it will return the post of the previous id, of course the simplest case is to re-query, but it would be better if a caching mechanism could be provided.

https://codesandbox.io/s/fancy-wood-9pdck7?file=/pages/about.js

[dai-shi]

Q1: How to cache the async post data?

So, useAtom works more or less like useState. It only remembers the current state.
A counter question is how would you accomplish your case with useState.
Maybe something like historyAtom?
btw, this is one reason why we provide jotai/query integrating react-query.

[Sylvenas]

I'll try to use useState to implement caching, then we'll continue the discussion.

I'm still learning jotai (so, maybe I'm asking a silly question)

Thank you very much for your help.

[dai-shi]

No, it's not a silly question. It's just out of the scope of core library, and it's the field of best practice by a community, and possibly a util function or 3rd-party library.

I said useState as an analogy to useAtom and questioned a possible method without jotai.
Of course, useState doesn't support "async" natively, so it would be difficult.

Q1: How to cache the async post data?

To answer this question again, caching is out of the scope of jotai core, and one suggestion for complex caching is jotai/query.

[Sylvenas]

Maybe my description of the cache is not accurate enough, resulting in our different understanding, I want the cache, is to store the data temporarily can be, later can continue to use.

The following code, implemented using useState, expresses my target.

https://codesandbox.io/s/cool-oskar-wvp0wx?file=/src/App.tsx

[dai-shi]

Your store is a mutable Map, which doesn't have to be in useState. You can just put outside component. Or, useRef in a component.
You can basically do the same with jotai atoms.

Roughly like this.

const cache = new Map();
const fooAtom = atom(async (get) => {
  const id = get(idAtom);
  if (cache.has(id)) {
    return cache.get(id);
  }
  const data = await fetchData(id);
  cache.set(id, data);
  return data;
});

[Sylvenas]

Because I want to store all the data in atom, which is not really necessary, thank you for your help.

[rpggio]

@dai-shi Is there a way to clear the cache when provider context changes? We use provider reset to ensure data cleanup on user logout and between tests.
It appears jotai-cache also retains data across provider resets.
Could we create our own store implementation with caching ability, where the cache is disposed with the store instance?

[dai-shi]

It appears jotai-cache also retains data across provider resets.

It's intentional:
https://github.com/jotaijs/jotai-cache/blob/cc0dfe4aebd18fad6cc437848e2e25ea3501a7ee/src/atomWithCache.ts#L25

Is there a way to clear the cache when provider context changes?

If that's the case, you want to create a cache per provider, which means as an atom.

const cacheAtom = atomWithLazy(() => new Map());
const fooAtom = atom(async (get) => {
  const cache = get(cacheAtom);
  const id = get(idAtom);
  if (cache.has(id)) {
    return cache.get(id);
  }
  const data = await fetchData(id);
  cache.set(id, data);
  return data;
});

[Sylvenas]

Another question is how to display the post data rendered from the server side by default. According to conosle.log, it seems that the id passed from the server side can be read in the About component, but in the ID component, the id passed from the server side cannot be read.

[dai-shi]

That's because you have a different <Provider> for <Id/>. You want to put <Provider> above useHydrateAtoms in the tree.

[Sylvenas]

Thanks for pointing out the key point.