atom example with asyc data fetch from server

[arunkumar413]

Hi Team,

Could you please put in the docs, an example that initializes an atom with the data fetched from the server.

Thanks,
Arun

[arunkumar413]

Currently I'm doing like this to set the atom data from the server but the useRecoilValue are not syncing up.

export const fileSystemTree = atom({
  key: "fileSystem", 
  default: {}, 
});

export function ACEeditor() {
  const [fileSystem, setFileSystem] = useRecoilState(fileSystemTree);

  useEffect(function () {
    async function getFileSystem() {
      let res = await fetch("http://localhost:5000/getdirtree");
      let data = await res.json();

      setFileSystem(data);
    }

    getFileSystem();
  }, []);
  

[BenjaBobs]

Have you had a look at https://recoiljs.org/docs/guides/asynchronous-data-queries#query-default-atom-values yet?

[arunkumar413]

@BenjaBobs Thanks for the info. Could you please review my code as I'm getting this error in the console.

https://stackblitz.com/edit/react-yamutd?file=src%2FApp.js,src%2Fstate.js,src%2FstateUsage.js,src%2Findex.js

Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
    at Batcher (https://react-yamutd.stackblitz.io/turbo_modules/[email protected]/umd/index.js:4245:5)
    at RecoilRoot_INTERNAL (https://react-yamutd.stackblitz.io/turbo_modules/[email protected]/umd/index.js:4333:5)
    at RecoilRoot (https://react-yamutd.stackblitz.io/turbo_modules/[email protected]/umd/index.js:4499:7)
    at App

    ```

[BenjaBobs]

That is likely because you haven't wrapped ACEeditor in a <Suspense> element.

At this point you have two options:

• Use <Suspense> to make sure your component waits for the query to finish
• Use useRecoilStateLoadable instead of useRecoilState so that you get a Loadable that you can then unpack when you're ready