SolidJSS
SolidJS•5mo ago•
2 replies
Carl (klequis)

Order of createAsync in component changes results

I'm getting results that make no sense. This sample SolidStart app has two databases lettersDb and numbersDb. They are simple an array with methods for get and set. The arrays of numbers is rendered to routes/index.js. The problem is that it only renders letters or numbers. That is:

If I have the createAsync calls with numbers first, both letters and numbers renders numbers.

const numbers = createAsync(() => numbersQuery());
const letters = createAsync(() => lettersQuery());


https://github.com/klequis/data-flow/blob/main/onlyNumbers.png)

If I reverse the order of the createAsync calls then only letters will render.

const letters = createAsync(() => lettersQuery());
const numbers = createAsync(() => numbersQuery());


https://github.com/klequis/data-flow/blob/main/onlyLetters.png


routes/index.js
import { createAsync } from "@solidjs/router";
import { Show } from "solid-js";
import { lettersQuery, numbersQuery } from "../lib/api";

export default function Home() {
  const numbers = createAsync(() => numbersQuery());
  const letters = createAsync(() => lettersQuery());

  return (
    <main>
      <p>
        <b>Home</b>
      </p>
      <Show when={numbers()}>
        <p>numbers: {numbers()}</p>
      </Show>
      <Show when={letters()}>
        <p>letters: {letters()}</p>
      </Show>
    </main>
  );
}


The sample project is here: https://github.com/klequis/data-flow
GitHub
data-flow/onlyLetters.png at main · klequis/data-flow
Contribute to klequis/data-flow development by creating an account on GitHub.
data-flow/onlyLetters.png at main · klequis/data-flow
GitHub
GitHub - klequis/data-flow
Contribute to klequis/data-flow development by creating an account on GitHub.
GitHub - klequis/data-flow
Was this page helpful?