SolidJS•2y ago

Looking for best way to re-validate route data after some arbitrary amount of time.

Hi all, good morning/afternoon/night. So, i have a routed component with nested routes that share a single resource, that is a logged in user's metadata, like so: The data loading function:

const carregarAcessos = ({
  params,
  location,
  navigate,
  data
}: RouteDataFuncArgs): Resource<MetadadosUsuario> => {
  const [usuario] = createResource(buscarMetadadosUsuario);
  return usuario;
};

const carregarAcessos = ({
  params,
  location,
  navigate,
  data
}: RouteDataFuncArgs): Resource<MetadadosUsuario> => {
  const [usuario] = createResource(buscarMetadadosUsuario);
  return usuario;
};

The router setup:

<Route path={'/auth'} component={Dashboard} data={carregarAcessos}>
  <Route path={'/'} component={Home} />
  <Route path={'/nfe'} element={<Link href="/auth/"></Link>} />
</Route>

<Route path={'/auth'} component={Dashboard} data={carregarAcessos}>
  <Route path={'/'} component={Home} />
  <Route path={'/nfe'} element={<Link href="/auth/"></Link>} />
</Route>

The Dashboard component:

const Dashboard: Component = (props) => {

  const usuario = useRouteData<typeof carregarAcessos>();

  const loginComMensagem = (): string => {
    adicionarMensagem('Credenciais de autenticação ausêntes. Faça login novamente.');
    return '/login';
  };

  return (
    <Suspense fallback={<div>loading</div>}>
      <Switch>
        <Match when={usuario.error}>
          <Navigate href={loginComMensagem} />
        </Match>
        <Match when={usuario()}>
          <ErrorBoundary fallback={(errr) => <div>{errr.message}</div>}>
              <Outlet> the rest of the content goes here... </Outlet>
          </ErrorBoundary>
        </Match>
      </Switch>
    </Suspense>
  );
};

const Dashboard: Component = (props) => {

  const usuario = useRouteData<typeof carregarAcessos>();

  const loginComMensagem = (): string => {
    adicionarMensagem('Credenciais de autenticação ausêntes. Faça login novamente.');
    return '/login';
  };

  return (
    <Suspense fallback={<div>loading</div>}>
      <Switch>
        <Match when={usuario.error}>
          <Navigate href={loginComMensagem} />
        </Match>
        <Match when={usuario()}>
          <ErrorBoundary fallback={(errr) => <div>{errr.message}</div>}>
              <Outlet> the rest of the content goes here... </Outlet>
          </ErrorBoundary>
        </Match>
      </Switch>
    </Suspense>
  );
};

Everything works as expected, and i love solids efficiency of the dashboard component never rerendering, only its subroutes whenever the client access them and it's really easy to access the same info in any of the subroutes. My question is as follows: Since the dashboard component is only ever going to render once, and the route data is only ever loaded once per that route access, how would be the most efficient way of re-fetching/re-validating that data after, let's say, an hour? Since i also use that data to determine if the user is authenticated or not, and the JWT is supposed to expire in an hour, i want him to be logged out once that happens.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Looking for best way to re-validate route data after some arbitrary amount of time.