query cache settings, somehow still fetching logs again sometimes

web/src/components/Filters.tsx

@@ -1,5 +1,6 @@
 import { Button, TextField } from "@material-ui/core";
 import React, { FormEvent, useContext } from "react";
+import { useQueryCache } from "react-query";
 import styled from "styled-components";
 import { store } from "../store";
 import { Settings } from "./Settings";
@@ -28,6 +29,7 @@ const FiltersWrapper = styled.div`
 
 export function Filters() {
     const { setCurrents, state } = useContext(store);
+    const queryCache = useQueryCache();
 
     const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
@@ -35,7 +37,11 @@ export function Filters() {
         if (e.target instanceof HTMLFormElement) {
             const data = new FormData(e.target);
 
-            setCurrents(data.get("channel") as string | null, data.get("username") as string | null);
+            const channel = data.get("channel") as string | null;
+            const username = data.get("username") as string | null;
+
+            queryCache.invalidateQueries(`${channel}:${username}`);
+            setCurrents(channel, username);
         }
     };
 

web/src/hooks/useAvailableLogs.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { useQuery } from "react-query";
 import { isUserId } from "../services/isUserId";
-import { store } from "../store";
+import { QueryDefaults, store } from "../store";
 
 export type AvailableLogs = Array<{ month: string, year: string }>;
 
@@ -33,7 +33,7 @@ export function useAvailableLogs(channel: string | null, username: string | null
         }
 
         return [];
-    });
+    }, QueryDefaults);
 
     return data ?? [];
 }

web/src/hooks/useBttvChannelEmotes.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "react-query";
+import { QueryDefaults } from "../store";
 import { BttvChannelEmotesResponse } from "../types/Bttv";
 import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
 
@@ -11,7 +12,7 @@ export function useBttvChannelEmotes(channelId: string): Array<ThirdPartyEmote>
 		return fetch(`https://api.betterttv.net/3/cached/users/twitch/${channelId}`).then(res =>
 			res.json() as Promise<BttvChannelEmotesResponse>
 		);
-	});
+	}, QueryDefaults);
 
 	if (isLoading) {
 		return [];

web/src/hooks/useBttvGlobalEmotes.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "react-query";
+import { QueryDefaults } from "../store";
 import { BttvGlobalEmotesResponse } from "../types/Bttv";
 import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
 
@@ -7,7 +8,7 @@ export function useBttvGlobalEmotes(): Array<ThirdPartyEmote> {
 		return fetch("https://api.betterttv.net/3/cached/emotes/global").then(res =>
 			res.json() as Promise<BttvGlobalEmotesResponse>
 		);
-	});
+	}, QueryDefaults);
 
 	if (isLoading || !data) {
 		return [];

web/src/hooks/useFfzChannelEmotes.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "react-query";
+import { QueryDefaults } from "../store";
 import { EmoteSet, FfzChannelEmotesResponse } from "../types/Ffz";
 import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
 
@@ -11,7 +12,7 @@ export function useFfzChannelEmotes(channelId: string): Array<ThirdPartyEmote> {
 		return fetch(`https://api.frankerfacez.com/v1/room/id/${channelId}`).then(res =>
 			res.json() as Promise<FfzChannelEmotesResponse>
 		);
-	});
+	}, QueryDefaults);
 
 	if (isLoading || !data?.sets) {
 		return [];

web/src/hooks/useFfzGlobalEmotes.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "react-query";
+import { QueryDefaults } from "../store";
 import { EmoteSet, FfzGlobalEmotesResponse } from "../types/Ffz";
 import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
 
@@ -7,7 +8,7 @@ export function useFfzGlobalEmotes(): Array<ThirdPartyEmote> {
 		return fetch("https://api.frankerfacez.com/v1/set/global").then(res =>
 			res.json() as Promise<FfzGlobalEmotesResponse>
 		);
-	});
+	}, QueryDefaults);
 
 	if (isLoading || !data?.sets) {
 		return [];

web/src/hooks/useLog.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { useQuery } from "react-query";
 import { isUserId } from "../services/isUserId";
-import { store } from "../store";
+import { QueryDefaults, store } from "../store";
 import { Emote, LogMessage, UserLogResponse } from "../types/log";
 
 
@@ -34,7 +34,7 @@ export function useLog(channel: string, username: string, year: string, month: s
         }
 
         return [];
-    });
+    }, QueryDefaults);
 
     return data ?? [];
 }

web/src/store.tsx

@@ -78,3 +78,7 @@ const StateProvider = ({ children }: { children: JSX.Element }): JSX.Element =>
 };
 
 export { store, StateProvider };
+
+export const QueryDefaults = {
+	staleTime: 5 * 60  * 1000,
+};