elite174 Posts - Answer Overflow

elite174

•Created by elite174 on 8/14/2024 in #support

[BUG?] Router: `isRouting()` immediately returns `false` when transition is not completed

Hey guys, I noticed isRouting changes immediately from true to false if transition happens on the same page (for instance, when I change query params and createAsync looks at these params), so isRouting becomes false when there's no new data yet. Is it intended behavior? isRouting works as expected (waits until the data comes) when the route is changing.

// pseudo code:
const isRouting = useIsRouting();
const [$searchParams, setSearchParams] = useSearchParams();

const data = createAsync(() => getSomeData({ page: $searchParams.page }));

return <>
  <div classList={{ inactive: isRouting() }}>{data.latest?.smth}</div>
  <button type="button" onClick={() => setSearchParams({page: +$searchParams.page + 1})}>Next page</button>
</>

// pseudo code:
const isRouting = useIsRouting();
const [$searchParams, setSearchParams] = useSearchParams();

const data = createAsync(() => getSomeData({ page: $searchParams.page }));

return <>
  <div classList={{ inactive: isRouting() }}>{data.latest?.smth}</div>
  <button type="button" onClick={() => setSearchParams({page: +$searchParams.page + 1})}>Next page</button>
</>

7 replies

SSolidJS

•Created by elite174 on 9/14/2023 in #support

createDeferred returns undefined under some conditions

Hey guys, do you know smth about this? https://github.com/solidjs/solid/issues/1883

3 replies

SSolidJS

•Created by elite174 on 8/24/2023 in #support

[SPA Routing]: How to not call data function for the protected routes

Let's imagine we have the following app

const App = () => (
  <AuthService>
    <Router>
      <Routes>
        <Route path="/" data={layoutDataFunction} component={LazyPageLayout}>
          <Route path="login" component={LazyLoginPage} />
          <Route path="" component={LazyDefaultLayout}>
            <Route path="content" component={LazyContentPage} data={contentPageDataFunction} />
            {/* Other pages */}
          </Route>
        </Route>
      </Routes>
    </Router>
  </AuthService>
)

const App = () => (
  <AuthService>
    <Router>
      <Routes>
        <Route path="/" data={layoutDataFunction} component={LazyPageLayout}>
          <Route path="login" component={LazyLoginPage} />
          <Route path="" component={LazyDefaultLayout}>
            <Route path="content" component={LazyContentPage} data={contentPageDataFunction} />
            {/* Other pages */}
          </Route>
        </Route>
      </Routes>
    </Router>
  </AuthService>
)

; I handle all auth in the layout data function:

export const layoutDataFunction = ({ navigate, location }: RouteDataFuncArgs) => {
  const { isLogged } = useContext(AuthContext);

  createComputed(() => {
    if (isLogged()) {
      if (location.pathname === "/login") navigate(PagePath.Channel);
    } else {
      if (location.pathname !== "/login") navigate(PagePath.Login);
    }
  });
};

export const layoutDataFunction = ({ navigate, location }: RouteDataFuncArgs) => {
  const { isLogged } = useContext(AuthContext);

  createComputed(() => {
    if (isLogged()) {
      if (location.pathname === "/login") navigate(PagePath.Channel);
    } else {
      if (location.pathname !== "/login") navigate(PagePath.Login);
    }
  });
};

When I enter /content page (unlogin state) the redirect hasn't worked yet, so contentPageDataFunction still fetches the data. I want to not load extra data if I don't need it. How to properly cancel the request for the content page in this case? Imagine we have the following contentPageDataFunction function:

export const contentPageDataFunction = ({data}) => {
  // I know that here we could get logged state from the parent
  // data function and then inside a resource make this check.
  // However in this case I'll need to change TS types, because
  // it will return <User | null> (if I return null for unlogged state)

  // How to deal with that???
  const [user] = createResource(async () => {
    const result = await myVideosAPI.getMyVideos();

    return result;
  });

  return user;
};

export const contentPageDataFunction = ({data}) => {
  // I know that here we could get logged state from the parent
  // data function and then inside a resource make this check.
  // However in this case I'll need to change TS types, because
  // it will return <User | null> (if I return null for unlogged state)

  // How to deal with that???
  const [user] = createResource(async () => {
    const result = await myVideosAPI.getMyVideos();

    return result;
  });

  return user;
};

Is there some RIGHT way to do protect routing for SPA apps?

11 replies

Gaming

Programming