S
SolidJS•3mo ago
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());
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());
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>
  );
}
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.
GitHub
GitHub - klequis/data-flow
Contribute to klequis/data-flow development by creating an account on GitHub.
2 Replies
Seb
Seb•3mo ago
You need to add a unique name for each of your queries as a second param for the query function. You don't have it in your sample project, maybe the problem comes from that, you put all your data in the same cache slot without a name.
Carl (klequis)
Carl (klequis)OP•3mo ago
Oops, oversight. Thank you for the catch!

Did you find this page helpful?