Conceptual issue with atomFamily and atomWithDefault

[stickfigure]

Hi - I'm pretty new to Jotai, and struggling with something that seems like it should be super obvious.

This seems like a pattern that can be found in nearly every web application:

• The application has a screen that displays Things (url of /things)
• User can click on a Thing and see a screen that displays Thing details (url of /things/123)

Ideally:

1. Clicking from /things to /things/123 shouldn't need to load anything from the server (we already have that state!)
2. Going directly to /things/123 (or reloading that url) should load Thing123's state (we didn't start by loading all things)

It feels like there's some combination of atomFamily and atomWithDefault that should accomplish this but I'm struggling to figure out the right pattern. Is there a simple example anywhere?

Taking a stab at it, I end up with something like:

const thingFamily = atomFamily(thingId => 
    atomWithDefault(
        async () => fetchThingFromServer(thingId);
   )
);

...which handles the GET /things/123 case. But how do I create an atom for the GET /things case that pre-populates the family atoms? I am confused.

Thanks in advance!

[dmaskasky]

atomFamily is lazy by default, and the async atoms that it returns for your case will suspend the consuming React components until they load. I think these defaults are intuitive and sensible.

But if you are looking to preload / hydrate these things and you know which store you want to use, you could do something like:

thingIds.map(thingFamily).forEach(store.get)

This will initiate the fetch for these things.

[stickfigure]

I don't need to fire off any more queries to load the Things - I fetched them from my original GET /things query. I just want to let the user see them. Does that make sense?

This can't be exotic - practically every webapp I've ever worked on has some sort of "display a list of things, click through to display a thing's details" behavior. I'm just trying to figure out how to do this without making extra server hits.

[dmaskasky]

How about

const thingsAtom = atom(fetchThings)
const thingFamily = atomFamily((thingId) => 
  atomWithRefreshAndDefault(
    splitAtom(
      thingsAtom,
      (thing) => thing.id === thingId
    ),
    async () => fetchThingFromServer(thingId)
  )
);

https://jotai.org/docs/recipes/atom-with-refresh-and-default

https://jotai.org/docs/utilities/split