T
TanStack•16mo ago
foreign-sapphire

[FIXED] Prevent Router's loader to rerun when the hash changes

How can i prevent a loader to rerun whenever i change the url's hash? 
{settingsMenu.map((menu) => (
    <Button
        key={menu.id}
        onClick={() => navigate({
          hash: menu.id,
        })}
            {menu.name}
    </Button>
))}
{settingsMenu.map((menu) => (
    <Button
        key={menu.id}
        onClick={() => navigate({
          hash: menu.id,
        })}
            {menu.name}
    </Button>
))}
Whenever i click the button, the route's loader runs again. How can i prevent it from running the loader again? For example if i am currently in 
/settings#accounts
/settings#accounts
clicking a button to go to 
/settings#security
/settings#security
causes the loader to run again
1 Reply
foreign-sapphire
foreign-sapphireOP•16mo ago
fixed it by adding a staleTime for the loader function. I'm not sure if there's a better way of doing it, if so please let me know. 
export const Route = createFileRoute("/_authenticated/settings")({
    component: () => <SettingsLayout />,
    loader: async ({ context: { queryClient } }) => {
        const data = await queryClient.fetchQuery({
            queryKey: ["get-user-settings"],
            queryFn: async () => {
                const { data, error } = await api.settings.me.get();
                if (error) return Promise.reject(error.value);

                return data;
            },
            staleTime: 1000 * 60 * 5, // 5 minutes
        });
        return data;
    },
});
export const Route = createFileRoute("/_authenticated/settings")({
    component: () => <SettingsLayout />,
    loader: async ({ context: { queryClient } }) => {
        const data = await queryClient.fetchQuery({
            queryKey: ["get-user-settings"],
            queryFn: async () => {
                const { data, error } = await api.settings.me.get();
                if (error) return Promise.reject(error.value);

                return data;
            },
            staleTime: 1000 * 60 * 5, // 5 minutes
        });
        return data;
    },
});

Did you find this page helpful?