#What is the right way to re-fetch a resource (if no signal is attached)

9 messages · Page 1 of 1 (latest)

sacred elbow
#

I have this component

import {
  Resource,
  component$,
  useResource$,
  useSignal,
} from "@builder.io/qwik";
import { server$ } from "@builder.io/qwik-city";
import { PrismaClient } from "@prisma/client";
import type { Actions as Action } from "@prisma/client";
import { Loading } from "../loading/loading";

const getActions = server$(async () => {
  const prisma = new PrismaClient();
  return prisma.actions.findMany();
});

export const Actions = component$(() => {
  const loading = useSignal(false);

  const actionsResource = useResource$<Action[]>(async () => {
    const actions = await getActions();
    return actions;
  });

  return (
    <div>
      <h1>Actions</h1>
      <Resource
        value={actionsResource}
        onPending={() => <Loading />}
        onResolved={(actions) => (
          <>
            {actions.map((action, index) => (
              <pre key={index}>{JSON.stringify(action.data)}</pre>
            ))}
          </>
        )}
      />
      <button
        onClick$={async () => {
          loading.value = true;
          await server$(async () => {
            const prisma = new PrismaClient();
            await prisma.actions.deleteMany();
          })();
          loading.value = false;
        }}
      >
        Clear
      </button>
    </div>
  );
});

When I hit clear, I want to after delete refetch the resource. how should I do this? am I using the wrong pattern?

fallow peak
#

Seems like this would be better served with a routeLoader$/routeAction$ because it will automatically send the latest data from the loader after submitting the action.

#

I'm extremely wary that I might be talking to an AI given what I've seen on Twitter

sacred elbow
#

hahaha

#

so I did have that thought, but I need this component to not be attached to the route

#

I settled on this for now. it works but I'm not sure if this is a "bad" solution

import { $, component$, useSignal, useTask$ } from "@builder.io/qwik";
import { server$ } from "@builder.io/qwik-city";
import type { Actions as Action } from "@prisma/client";
import { PrismaClient } from "@prisma/client";
import { Loading } from "../loading/loading";

const getActions = server$(async () => {
  const prisma = new PrismaClient();
  return prisma.actions.findMany();
});

export const Actions = component$(() => {
  const loading = useSignal(false);
  const actions = useSignal([] as Action[]);

  const updateActions = $(async () => {
    loading.value = true;
    actions.value = await getActions();
    loading.value = false;
  });

  useTask$(async () => {
    await updateActions();
  });

  return (
    <div>
      <h1>Actions</h1>
      {loading.value && <Loading />}
      <button
        onClick$={async () => {
          loading.value = true;
          await server$(async () => {
            const prisma = new PrismaClient();
            await prisma.actions.deleteMany();
          })();
          updateActions();
          loading.value = false;
        }}
      >
        Clear
      </button>
    </div>
  );
});
fallow peak
#

Got it, then you might as well return the new actions from the server$ to save the round trip at least

#

actions.value = await server$(...)()

sharp trail
#

Is this working in the latest versions? I thought server$ always has to be triggered on client-side?