Loading remote data in $mol is not a special API — an async value is just a reactive property written as if the response were already there. The view waits for it, shows a loading state, and re-renders when the data arrives.
Call the network inside a @ $mol_mem and return the parsed result. There is no promise, no await and no callback in the code:1namespace $.$${2export class $my_usersextends$.$my_users{3@ $mol_mem4users(){5return this.$.$mol_fetch.json('https://api.example.com/users')as{6id:number7name:string8}[]9}10}11}$mol_fetch suspends the fiber until the response arrives, then the computation restarts and users() returns the array. While it is pending, any view that reads users() automatically shows the built-in loading state — you write no isLoading flag. Do not return a promise from a @ $mol_mem yourself: a promise stored as a value keeps the cell in the loading state forever, see Troubleshooting.this.$ is the component's context. Every service comes through it: $mol_fetch for the network, $mol_state_arg for the URL, $mol_after_timeout for time. In a test the context is replaced, so the same users() sends its request to a mock instead of the network, without a line of the component changing. Testing shows that mock.
Bind the resolved data straight into a list:1@ $mol_mem2user_names(){3return this.users().map(user=>user.name)4}When the response arrives, users() updates, user_names() recomputes, and the list renders. No callbacks, no useEffect.
Because it is just a reactive cell, you refetch by invalidating it. Depend on a token you can bump:1@ $mol_mem2reload_token(next?:number){3return next??04}56@ $mol_mem7users(){8this.reload_token()// subscribe9return this.$.$mol_fetch.json('https://api.example.com/users')asunknown[]10}1112@ $mol_action13reload(){14this.reload_token(this.reload_token()+1)15}Edit this page on GitHubWas this helpful?YesNoPreviousTroubleshootingNextData SchemasOn this pageAn async propertyRendering the resultReloadingErrorsNextType to search the documentation.
