rtzrtz. Posts - Answer Overflow

rtzrtz.

Explore posts from servers

•Created by rtzrtz. on 2/10/2025 in #support

SingleFlight does not work (See Example)

I'm trying to make a single flight request work, but I'm always getting two requests: What am I missing here?

import {
  action,
  createAsync,
  query,
  revalidate,
  useAction,
} from "@solidjs/router";

const items: string[] = ["yo", "lo", "foo", "bar"];

const getItems = query(async () => {
  "use server";
  await new Promise((r) => setTimeout(r, 200));
  return items;
}, "items");

const addAction = action(async (item: string) => {
  "use server";
  items.push(item);
  return revalidate("items");
});

export default function Flight() {
  const items = createAsync(async () => getItems(), { // does always fire after clicking "Add"
    deferStream: true,
  });

  const addItem = useAction(addAction); // response never includes items-data

  return (
    <div>
      <ul>
        {items()?.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <button onClick={() => addItem(Date.now().toString())}>Add</button>
    </div>
  );
}

import {
  action,
  createAsync,
  query,
  revalidate,
  useAction,
} from "@solidjs/router";

const items: string[] = ["yo", "lo", "foo", "bar"];

const getItems = query(async () => {
  "use server";
  await new Promise((r) => setTimeout(r, 200));
  return items;
}, "items");

const addAction = action(async (item: string) => {
  "use server";
  items.push(item);
  return revalidate("items");
});

export default function Flight() {
  const items = createAsync(async () => getItems(), { // does always fire after clicking "Add"
    deferStream: true,
  });

  const addItem = useAction(addAction); // response never includes items-data

  return (
    <div>
      <ul>
        {items()?.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <button onClick={() => addItem(Date.now().toString())}>Add</button>
    </div>
  );
}

11 replies

SSolidJS

•Created by rtzrtz. on 2/4/2025 in #support

behaviour of createAsync in hooks - why cached?

I'm trying to get a better understanding on createAsync & query, and weather or not it is an appropriate way to share state. I created a hook and use it like this. This works perfectly fine. But I'm confused why the logs appear in the console, but no requests are made. I understood, that the query() cashes for only 5 seconds - so why is it not making requests all the timem even on navigation? I can import the hook and access the data from everywhere simultaneously. Honestly this is the behaviour i hoped for (its easy to revalidate the cash), but I'd like to fully understand why this works. Thanks!

//useMyHook.tsx
const getData = query(async () => {
  "use server";
  return { user: 1 };
}, "data");

export function useMyHook() {
  const res = createAsync(() => getData());
  return {
    user: () => {
      console.log("I'm am called and logged all the time!")
      return res()?.user,
    }
  };
}

//useMyHook.tsx
const getData = query(async () => {
  "use server";
  return { user: 1 };
}, "data");

export function useMyHook() {
  const res = createAsync(() => getData());
  return {
    user: () => {
      console.log("I'm am called and logged all the time!")
      return res()?.user,
    }
  };
}

// someComponent.tsx
export default function Page() {
  const { user } = useMyHook();
  return <div>{user()}</div>
}

// someComponent.tsx
export default function Page() {
  const { user } = useMyHook();
  return <div>{user()}</div>
}

❤️

14 replies

DTDrizzle Team

•Created by rtzrtz. on 11/27/2023 in #help

import of drizzle-orm makes typescript complain about missing "document"

5 replies

Gaming

Programming