feat: support deps in useApiQuery and refresh rival requests properly

client/src/app/pages/dashboard/users/ARCIntegrationPage.tsx

@@ -17,7 +17,7 @@ export default function ARCIntegrationPage({ reqUser }: { reqUser: PublicUserDoc
 	const { data, error } = useApiQuery<{
 		iidx: ARCSavedProfileDocument | null;
 		sdvx: ARCSavedProfileDocument | null;
-	}>(`/users/${reqUser.id}/integrations/arc`, undefined, true);
+	}>(`/users/${reqUser.id}/integrations/arc`, undefined);
 
 	useEffect(() => {
 		if (data) {

client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsComparePage.tsx

@@ -3,6 +3,7 @@ import useSetSubheader from "components/layout/header/useSetSubheader";
 import Divider from "components/util/Divider";
 import Icon from "components/util/Icon";
 import SelectLinkButton from "components/util/SelectLinkButton";
+import useLUGPTSettings from "components/util/useLUGPTSettings";
 import useUGPTBase from "components/util/useUGPTBase";
 import React from "react";
 import { Col, Row } from "react-bootstrap";
@@ -28,6 +29,12 @@ export default function RivalsComparePage({
 
 	const base = `${useUGPTBase({ reqUser, game, playtype })}/rivals/compare`;
 
+	const { settings } = useLUGPTSettings();
+
+	if (!settings) {
+		return <div>You have no settings. How did you get here?</div>;
+	}
+
 	return (
 		<Row>
 			<Col xs={12} className="text-center">
@@ -63,6 +70,7 @@ export default function RivalsComparePage({
 						<ScoreLeaderboard
 							game={game}
 							playtype={playtype}
+							refreshDeps={[`rivals-score-leaderboard-${settings.rivals.join(",")}`]}
 							url={`/users/${reqUser.id}/games/${game}/${playtype}/rivals/score-leaderboard`}
 						/>
 					</Route>

client/src/app/pages/dashboard/users/games/_game/_playtype/rivals/RivalsManagePage.tsx

@@ -33,8 +33,12 @@ export default function RivalsManagePage({
 		`Managing ${reqUser.username}'s ${FormatGame(game, playtype)} Rivals`
 	);
 
+	const { settings } = useLUGPTSettings();
+
 	const { data, error } = useApiQuery<PublicUserDocument[]>(
-		`/users/${reqUser.id}/games/${game}/${playtype}/rivals`
+		`/users/${reqUser.id}/games/${game}/${playtype}/rivals`,
+		{},
+		[`fetch-rivals-${settings?.rivals.join(",")}`]
 	);
 
 	const {

client/src/components/game/ScoreLeaderboard.tsx

@@ -25,7 +25,12 @@ const USER_COLOURS = [
 	COLOUR_SET.orange,
 ];
 
-export default function ScoreLeaderboard({ game, playtype, url }: GamePT & { url: string }) {
+export default function ScoreLeaderboard({
+	game,
+	playtype,
+	url,
+	refreshDeps = [],
+}: GamePT & { url: string; refreshDeps?: Array<string> }) {
 	const gptConfig = GetGamePTConfig(game, playtype);
 
 	const defaultAlg = useScoreRatingAlg(game, playtype);
@@ -43,7 +48,11 @@ export default function ScoreLeaderboard({ game, playtype, url }: GamePT & { url
 			</Form.Control>
 		) : null;
 
-	const { data, error } = useApiQuery<ScoreLeaderboardReturns>(`${url}?alg=${alg}`);
+	const { data, error } = useApiQuery<ScoreLeaderboardReturns>(
+		`${url}?alg=${alg}`,
+		{},
+		refreshDeps
+	);
 
 	if (error) {
 		return (

client/src/components/util/query/useApiQuery.tsx

@@ -5,10 +5,22 @@ import { SuccessfulAPIResponse } from "tachi-common";
 export default function useApiQuery<T>(
 	url: string | string[],
 	options?: RequestInit,
-	neverCache = false
+	additionalDeps?: string[]
 ) {
+	const deps = [];
+
+	if (additionalDeps) {
+		deps.push(...additionalDeps);
+	}
+
+	if (Array.isArray(url)) {
+		deps.push(...url);
+	} else {
+		deps.push(url);
+	}
+
 	return useQuery<T, UnsuccessfulAPIFetchResponse>(
-		url,
+		deps,
 		async () => {
 			if (Array.isArray(url)) {
 				const results = await Promise.all(url.map((u) => APIFetchV1(u, options)));