SolidJSS
SolidJS•3y ago•
34 replies
ChrisThornham

How Do I Update Client Signals When Using "use server";

I've set up a Supabase AuthService that tracks the error state with a signal.

export const [supabaseError, setSupabaseError] = createSignal("");


If I get an error from Supabase, I set the error state in my AuthService file. Here's an example from my Logout function:

export async function supabaseLogout() {
  try {
    // try logging out
    const { error } = await supabase.auth.signOut();
    // throw an error if there is one
    if (error) throw error;
  } catch (error: any) {
    // THIS WORKS
    setSupabaseError(error.message);
  }
}


Any pages that use the AuthService can import the supabaseError signal, and display error messages when supabaseError().length > 0.

<Show when={supabaseError().length > 0}>
  <div>
    <p style={{ color: "#c62828" }}>{supabaseError()}</p>
  </div>
</Show>


This works great when I do everything on the client.

BUT, I'm running into trouble when I have to use "use server";. If I use setSupabaseError() from the server, the DOM does not update.

For context, here's my action for deleting an account.

export const supabaseDeleteAccount = action(async (userId: string) => {
  "use server";

  // get the Auth Admin Client
  const supabase = getAuthAdminClient();
  if (!supabase) {
    return;
  }
  try {
    const { error } = await supabase.auth.admin.deleteUser(userId);
    if (error) throw error;
  } catch (error: any) {
    // THIS DOESN'T WORK
    setSupabaseError(error.message);
  }
});


So, how can I update a client-side signal when using "use server";?

The docs state the following about Global state and the server:

"It is recommended that application state should always be provided via Context instead of relying on global."

So, do I need to use context?

Meta frameworks are new to me, so please excuse my ignorance 🙂

Thank you!

Chris
Was this page helpful?