How to test for is loaded for a create async source change

In the real world example there are these methods that loads some async data:

    loadArticles(predicate) {
      setArticleSource(["articles", predicate]);
    },
    loadArticle(slug) {
      setArticleSource(["article", slug]);
    },

    loadArticles(predicate) {
      setArticleSource(["articles", predicate]);
    },
    loadArticle(slug) {
      setArticleSource(["article", slug]);
    },

https://github.com/solidjs/solid-realworld/blob/main/src/store/createArticles.js Here's what async resource looks like in my case:

  const replay_tree = createAsync<ModelReplayTree>(async () => {
        let s = source()
        if (!s) {
            return default_replay_tree()
        }
})

  const replay_tree = createAsync<ModelReplayTree>(async () => {
        let s = source()
        if (!s) {
            return default_replay_tree()
        }
})

I have 2 questions: when you do this:

let [pending, start] = useTransition()
  start(async foo() => { return 30 })

let [pending, start] = useTransition()
  start(async foo() => { return 30 })

is pending, waiting for foo to finish, or does it also include any triggered createAsync's as well. Because as I tested before it always returned true to me before loading this async resource I don't know why. Second: In this real world example, how would I get notified when the articles finished loading after I call loadArticles() or loadArticle(). Maybe the real world example is outdated because it uses createResource, but it's the only example that I adopted changing it to createAsync in my case. But I still would like to know when the articles are ready to show. Sometimes even though an old value is loaded, I want to load it again to get a fresh copy because I made some changes in the old copy. So I can't just test the id to be equal to requested id. Which how I used to check for loaded. Please notify me if this example is bogus, because it does use some tricks I think is pretty weird.

GitHub

solid-realworld/src/store/createArticles.js at main · solidjs/solid...

A Solid Implementation of the Realworld Example App - solidjs/solid-realworld

8 Replies

peerreynders•3w ago

1. Transition's pending is a global signal that once a transition has begun will remain true until the last promise triggering a suspense boundary has resolved. So it will not necessarily tell you when the promise that started the transition has settled. 2. createAsync doesn't have the same affordances as createResource but there is the undefined-to-resolvedvalue transition that you can work with. What is it you need to do when the promise resolves?

gsoutzOP•3w ago

Promise resolves a replay tree, when the replay tree is loaded, I want to set the cursor to a specific location, so it renders the correct path in the tree. As a solution I could tell to load the replay tree with the cursor set to correct location, but I just had to ask before I do that. the cursor is also a property in the replay tree, like this is what resolves inside a store, like get articles() { property getter inside the store.

let default_replay_tree = { flat_nodes: [], cursor_path: '' } etc.

let default_replay_tree = { flat_nodes: [], cursor_path: '' } etc.

peerreynders•3w ago

I'm not sure if you noticed what is going on here:

return $req(args[1]).then(({ articles, articlesCount }) => {
  queueMicrotask(() =>
    setState({ totalPagesCount: Math.ceil(articlesCount / LIMIT) })
  );
  return articles.reduce((memo, article) => {
    memo[article.slug] = article;
    return memo;
  }, {});
});

return $req(args[1]).then(({ articles, articlesCount }) => {
  queueMicrotask(() =>
    setState({ totalPagesCount: Math.ceil(articlesCount / LIMIT) })
  );
  return articles.reduce((memo, article) => {
    memo[article.slug] = article;
    return memo;
  }, {});
});

$req(args[1]) is the original promise but the chained then splits {articles, articlesCount} into two separate updates: - the reorganized [slug]: article object - a later asynchronous update of the totalPagesCount You could similarly use

setTimeout(() => setCursor(cursorPath), 0);

setTimeout(() => setCursor(cursorPath), 0);

inside a chained function onto the promise.

GitHub

solid-realworld/src/store/createArticles.js at f6e77ecd652bf32f0dc9...

A Solid Implementation of the Realworld Example App - solidjs/solid-realworld

peerreynders•3w ago

The setTimeout hack is a common approach for “do this later when things have settled down”. It's upgraded to queueMicrotask whenever you want to do it ASAP before the next paint but not synchronously.

MDN Web Docs

Using microtasks in JavaScript with queueMicrotask() - Web APIs | MDN

A microtask is a short function which is executed after the function or program which created it exits and only if the JavaScript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script's execution environment.

GitHub

solid-start/examples/todomvc/src/routes/index.tsx at 28e3fc5030b4a4...

SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.

gsoutzOP•3w ago

I set a state variable is_replay_tree_just_loaded, set to false initially and set to true on this then clause of the async query to get the replay_tree. so I can test against that to see if replay_tree is just loaded to be available for display. I also do a state transition to a next state where tree is ready to be used. I tried both setTimeout and queueMicrotask, queueMicrotask, is too early to trigger replay_tree_is_just_loaded before the replay_tree is actually has the fresh value, so it throws in my code because code uses old replay_tree . setTimeout however seemed to fix the issues. However I am so troubled doing these things with so many caveats and hard to track down state flow. I am not sure if it's the nature of solid.js or nature of using async data loading logic.

peerreynders•3w ago

If you're more comfortable with it you could try:

createEffect(
  on(
    () => replay_tree()?.cursor_path,
    (path) => {
      if (path) setCursor(path);
    }
  )
);

createEffect(
  on(
    () => replay_tree()?.cursor_path,
    (path) => {
      if (path) setCursor(path);
    }
  )
);

Again it's OK because you are leaving the reactive system. Hypothetically this should only set the cursor when new data arrives. But yeah, the asynchronous can feel a bit weird if you are only used synchronous/blocking. Perhaps something like https://humanwhocodes.com/blog/2020/09/creating-javascript-promise-from-scratch-constructor/ can help. I find that the “faux synchronous appearance” of async/wait creates a bit of a false sense of familiarity.

Creating a JavaScript promise from scratch, Part 1: Constructor - H...

Sometimes it's easier to understand complex concepts like promises by creating them yourself.

gsoutzOP•3w ago

cursor path is always set to some value anyway, and it is saved in database. It's just shouldn't be set to a wrong path if the replay_tree is the old one. I am fully aware and familiar how async await or promises work. It's just tracking the control flow of these effects, which I have to use in order to build something functional with solid.js is getting worse.

peerreynders•3w ago

It's just tracking the control flow of these effects

If I'm understanding you correctly then that isn't so unusual as “regular” code is basically scripting control flow. Solid code is scaffolding logic at author time that controls data flow at run time (RxJS is even worse in that regard). The way I have compared it before:

“control of flow” is operating a vehicle directly from the steering wheel. “reactive” is programming the vehicle to find its own way and letting go of the steering wheel.

Gaming

Programming

How to test for is loaded for a create async source change

Did you find this page helpful?