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

[RobinManoli]

These answers confused me, and also AI answers confused me even further. Is it really necessary to combine async functions inside Derive or html components?

Why not just use p(data.val), and create a normal async function (which does not handle any html), and let the async function just update data.val?

One thing I noticed, is that you should not call the async function from a component that uses the same state variable as the async function. Of course you need to trigger the async function from somewhere else.

[Tao-VanJS]

I think the reason derived is used in the example is that we want to define a "trigger", which is when the val of a state (or one of multiple states) is changed, we want some piece of code to be executed.