question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Imperatively refresh atomFamily

See original GitHub issue

What would be the best way to imperatively refresh an atomFamily?

Let’s say I have following case, where I use get(updateAtomFamily) in order to track it as dependency in the atomFamily so that I trigger the fetch imperatively:

export const fetchAtomFamily = atomFamily(
  (param) => async (get) => {
    get(updateAtomFamily);
    const { data } = await getData({
      param1: param.param1,
      param2: param.param2,
    });
  },
  null,
  deepEqual
);

export const updateAtomFamily = atom(0);

Then my idea was to imperatively useUpdateAtom in my component as a refresh function like this:

  const refresh= useUpdateAtom(updateAtomFamily);

and then have the imperative call:

<button onClick={() => refresh(prev => prev + 1)}>refresh</button> 

However, when I trigger the refresh function, I get following error:

Uncaught Error: atom state not found. possibly a bug.

In my opinion however, even if this approach worked, it feels sluggish and cumbersome to me. It would be extremely helpful if the API had a native approach to re-fetch async atoms 😃

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:18 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
jcoussardcommented, Sep 30, 2020

I really like this library! While I’m still trying the figure out its quirks, I figured solving a puzzle is a good way to learn.

Here is my attempt at it: https://codesandbox.io/s/cool-firefly-xhyc2

Is it a good way to solve that problem? I’m wondering whether const postsAtom = atom(fetchPosts()); is a good practice or not since it initialize the atom with a promise.

(PS it seems codesandbox’s refresh and Jotai don’t play along well, you might get the atom state not found. possibly a bug. error after editing the code, but it’ll work fine after reloading the in-page browser… still I’m curious what might cause it.)

1reaction
fkocovskicommented, Sep 29, 2020

I like your approach. For the moment I decided to stick to the empty atom variant and fill it with useEffect. I also tried the approach of having a primitive refresh atom with an initial value of 0 and use that as a dependency in the async get part and increment that one in order to trigger a re-fetch. That works now flawlessly in 0.7.3!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Asynchronous Data Queries - Recoil
You can imperatively update the atom state with the new query results based on your refresh policy. const userInfoState = atomFamily({
Read more >
Utils — Jotai, primitive and flexible state management for React
This creates a new atom that is connected with URL hash. atomFamily. This will create a function that takes param and returns an...
Read more >
How to refresh a method that is called imperatively and ...
I have a method which I am calling imperatively in LWC but it is annotated with Cacheable = true at server end. How...
Read more >
docs/api/utils.mdx | jotai@v1.5.0 - Deno
This is an overview over atom creators/hooks utilities that can found under `jotai/utils`. Each utility is listed below with a link to their...
Read more >
Intel PR Chip Shots
Consumers can update their new or existing PC to take advantage of the speed ... The newest member of the Atom family is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found