How to Await Promises Stored in State without Losing Reactivity

[Kynson]

Hello,
I am new to vanjs and I am looking for a way to get the resolved value from a promise which is stored inside a derived state and
render the value to the DOM (with reactivity). Below the code for the derived state:

const latitude = state(52.52);
const longitude = state(13.41);
const data = derive(async () => {
      const response = await fetch(
          `${API_ROUTE}?latitude=${latitude.val}&longitude=${longitude.val}`
        );
      const { result } = await response.json();
 
      return result.foo;
    });

I've tried the followings but none of them worked:

p((await data.val))

Does not work as it eval to the actual value contained in the promise, van can't recognise it as a state object. The value does not update even latitude and longitude changes

p(async () => (await data.val))

Does not work, van converted the function into string, text "async () => (await data.val)" is rendered.

Rationale:
I would like to trigger an API call when the user updates latitude and longitude, and render the new result accordingly. Currently the oninput event handler only updates latitude.val and longitude.val

May I know is there a way to achieve this or I have missed anything?

Many thanks.

[Tao-VanJS]

I think you can try this:

const latitude = state(52.52);
const longitude = state(13.41);
const data = state()
derive(async () => {
  const response = await fetch(
    `${API_ROUTE}?latitude=${latitude.val}&longitude=${longitude.val}`
  );
  const { result } = await response.json();

  data.val = result.foo;
});

and then

p(data)

For more advanced usage of derived states, you can refer to this section: https://vanjs.org/advanced#advanced-state-derivation.

Hope it works :-)

[sirenkovladd]

One note, derive expects a synchronous function
so make sure you have called all getters before the first await call

for example

derive(async () => {
  await 1;
  const response = await fetch(url.val);
  const { result } = await response.json();

  data.val = result.foo;
});

will not work anymore

Moreover, all further calls of the getter after the await may have negative consequences, so it is better to save all variables before calling the await
for example

derive(async () => {
  // save var
  const lat = latitude.val;
  const lng = longitude.val;
  // process
  await 1;
  const response = await fetch(getUrl(lat, lng));
  const { result } = await response.json();

  data.val = result.foo;
});

[Kynson]

It works! Thanks a lot 😀 and this project is really awesome