expert Posts - Answer Overflow

expert

•Created by expert on 4/7/2024 in #support

How do I postpone invocation of fetcher function of the solid-js resource?

I have following snippet in my .tsx file. Could you please explain why mappings resource is being called for switch branches that are false ? How can I avoid it ?

const [pipeline] = createResource(() => api.pipeline(params.id)) const [mappings] = createResource(() => api.pipelineMappings(params.id), { deferStream: true }) <Switch> <Match when={pipeline()?.state == PipelineState.INCOMPLETE}> {/Show this div when mapping is not loaded/} <div class="flex flex-col items-center py-12 px-4 sm:px-6"> <h1 class="text-medium mb-2 text-2xl text-neutral-600">No mappings</h1> <p class="text-neutral-600">Nothing to show until pipeline is fully configured.</p> </div> </Match> <Match when={pipeline()?.state != PipelineState.INCOMPLETE}> <Show when={mappings() != undefined} fallback={<LoadingIcon/>}> </Match> </Switch>

3 replies

SSolidJS

•Created by expert on 3/27/2024 in #support

Canonical way to handle exceptions in async functions to perform redirect?

Hi folks, I'm very new to solid and frontend development hence my question. I have a class that talks to server API. It uses cookie to authenticate so eventually cookie may expire and an endpoint returns http 401 error.

export class UserActions {

  private handleError(response: Response): void {
    if (response.status === 401) {
      useNavigate()(`/login?redirect=${encodeURIComponent(location.pathname)}`)
      // throw new ServiceError(ErrorType.Authentication, 'Please login again');
    }
  }

  login(email: string, password: string): Promise<User | null> {

    return fetch('http://localhost:8080/api/login', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    })
        .then(response => {
          this.handleError(response);
          return response.ok ? response.json() : null;
        })
  }
}

export class UserActions {

  private handleError(response: Response): void {
    if (response.status === 401) {
      useNavigate()(`/login?redirect=${encodeURIComponent(location.pathname)}`)
      // throw new ServiceError(ErrorType.Authentication, 'Please login again');
    }
  }

  login(email: string, password: string): Promise<User | null> {

    return fetch('http://localhost:8080/api/login', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    })
        .then(response => {
          this.handleError(response);
          return response.ok ? response.json() : null;
        })
  }
}

and here is example how it's used

export default function UserProfile() {
  const context = useContext(SessionContext);

  const [read, write] = createSignal<string>("Initial value")

  const clickHandler = async () => {
    let user = await api.currentUser()
    write(user.email)
  };

  return (
      <AuthenticatedRoute>
        <div>Hello, {context?.user?.firstName} {context?.user?.lastName}</div><br/>
        <button onClick={clickHandler}>Refresh</button><br/>
        <div>Value: {read()}</div>
      </AuthenticatedRoute>
  );
}

export default function UserProfile() {
  const context = useContext(SessionContext);

  const [read, write] = createSignal<string>("Initial value")

  const clickHandler = async () => {
    let user = await api.currentUser()
    write(user.email)
  };

  return (
      <AuthenticatedRoute>
        <div>Hello, {context?.user?.firstName} {context?.user?.lastName}</div><br/>
        <button onClick={clickHandler}>Refresh</button><br/>
        <div>Value: {read()}</div>
      </AuthenticatedRoute>
  );
}

How can I centralize handing of such error so that any page that gets the exception would redirect user to login page ? I tried using <ErrorBoundary> but it doesn't catch exception thrown in onClick handler because, I assume, it's not thrown in rendering stage. I tried calling navigate() in UserActions but it does nothing. What is the proper way to achieve it ? Thank you.

2 replies

Gaming

Programming