Refresh selector & update UI

[ivanjeremic]

Hello, What Is the easiest way to refresh a selector that fetches some async data and updates the UI? Do I need to update my UI manually using a useEffect?

In the docs it says: Query Refresh Selector evaluation should provide a consistent value for a given state based on input (dependent state or family parameters)

But my selector is fetching some data without depending on any atom because I don't need atoms for it, so am I doing something wrong here?

export const databaseListSelector = selector({
  key: 'databaseListSelector',
  get: async () => {
    const databaseList: any | string[] = await getDatabaseList();
    return databaseList;
  },
});

[BenjaBobs]

What we usually do is have an atom solely for the purpose of refreshing.

// increment this to refrseh databaseListSelector
export const databaseListSelectorRefresh = atom({
  key: 'databaseListSelector_refresh',
  default: 0,
});

export const databaseListSelector = selector({
  key: 'databaseListSelector',
  get: async ({ get }) => {
    // create a dependency so it becomes refreshable
    get(databaseListSelectorRefresh);

    // do the actual data fetching
    const databaseList: any | string[] = await getDatabaseList();
    return databaseList;
  },
});

And then when we need to refresh we do

export default function MyRefreshButton() {
    const refresher = useSetRecoilState(databaseListSelectorRefresh);

    return <button onClick={() => refresher(x => x+1)}>
        Re-fetch data
    </button>
}

[ivanjeremic]

get(refresh); where is refresh coming from?

[ivanjeremic]

get(refresh); where is refresh coming from?

Ok Thanks, I get it now it is just the atom state, hopefully, recoil will get an easier way to refresh/re-run selectors based on just the key

[BenjaBobs]

Oh sorry, I accidentally didn't write the correct name, I edited my response to reference the correct atom.

[drarmstr]

Please see this section in the documentation for some examples of query refreshing.

[BenjaBobs]

Link: https://recoiljs.org/docs/guides/asynchronous-data-queries#query-refresh

[ivanjeremic]

Would be really nice to have some hook to be able to refresh a selector by key even if the selector has no atoms he depends on, don't know if something like this would be possible.