SolidJS•7mo ago•

2 replies

Order of createAsync in component changes results

I'm getting results that make no sense. This sample SolidStart app has two databases

lettersDb

lettersDb

and

numbersDb

numbersDb

. They are simple an array with methods for get and set. The arrays of numbers is rendered to

routes/index.js

routes/index.js

. The problem is that it only renders letters or numbers. That is:

If I have the

createAsync

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

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.

SolidJS•7mo 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

lettersDb

and

numbersDb

numbersDb

. They are simple an array with methods for get and set. The arrays of numbers is rendered to

routes/index.js

routes/index.js

. The problem is that it only renders letters or numbers. That is:

If I have the

createAsync

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

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.

Order of createAsync in component changes results

Order of createAsync in component changes results

Similar Threads

Similar Threads

Similar Threads