refactor: use skipTokens for typesafe disabling of query

6lr61 · Sep 18, 2024 · 4c23ff6 · 4c23ff6
1 parent f46f6bf
commit 4c23ff6
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 36 deletions.
diff --git a/src/hooks/useBadges.ts b/src/hooks/useBadges.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { skipToken, useQuery } from "@tanstack/react-query";
 import { getBadges, type Badge, type BadgeSet } from "../utils/api/getBadges";
 import { useContext } from "react";
 import { AuthContext } from "../contexts/auth-state/AuthContext";
@@ -19,10 +19,11 @@ export function useBadges(userId?: string) {
   const { authState } = useContext(AuthContext);
 
   const { data } = useQuery({
-    enabled: !!authState,
+    enabled: Boolean(authState),
     queryKey: ["twitchBadges", userId],
-    // @ts-expect-error authState is not undefinend when query is exectued
-    queryFn: () => getBadges(authState, userId ?? authState?.user.id),
+    queryFn: authState
+      ? () => getBadges(authState, userId ?? authState.user.id)
+      : skipToken,
     select: makeBadgeMap,
   });
 

diff --git a/src/hooks/useBttvEmotes.ts b/src/hooks/useBttvEmotes.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { skipToken, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
 interface BetterTTVEmote {
@@ -96,21 +96,22 @@ export function useBttvEmotes(userId?: string) {
   });
 
   const { data: channel } = useQuery({
-    enabled: !!userId,
+    enabled: Boolean(userId),
     queryKey: ["bttvChannelEmotes", userId],
-    queryFn: () =>
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      fetch(`https://api.betterttv.net/3/cached/users/twitch/${userId}`)
-        .then((response) => response.json())
-        .then(
-          ({
-            channelEmotes,
-            sharedEmotes,
-          }: {
-            channelEmotes: BetterTTVEmote[];
-            sharedEmotes: BetterTTVEmote[];
-          }) => [...channelEmotes, ...sharedEmotes]
-        ),
+    queryFn: userId
+      ? () =>
+          fetch(`https://api.betterttv.net/3/cached/users/twitch/${userId}`)
+            .then((response) => response.json())
+            .then(
+              ({
+                channelEmotes,
+                sharedEmotes,
+              }: {
+                channelEmotes: BetterTTVEmote[];
+                sharedEmotes: BetterTTVEmote[];
+              }) => [...channelEmotes, ...sharedEmotes]
+            )
+      : skipToken,
     select: makeChannelFragments,
   });
 

diff --git a/src/hooks/useGetProfile.ts b/src/hooks/useGetProfile.ts
@@ -1,15 +1,16 @@
 import { useContext } from "react";
 import { AuthContext } from "../contexts/auth-state/AuthContext";
 import { getUser } from "../utils/api/getUser";
-import { useQuery } from "@tanstack/react-query";
+import { skipToken, useQuery } from "@tanstack/react-query";
 
 export function useGetProfile(login: string) {
   const { authState } = useContext(AuthContext);
 
   return useQuery({
-    enabled: !!authState,
+    enabled: Boolean(authState),
     queryKey: ["userProfilePicture", login],
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    queryFn: () => getUser(authState!.token.value, authState!.client.id, login),
+    queryFn: authState
+      ? () => getUser(authState.token.value, authState.client.id, login)
+      : skipToken,
   });
 }
diff --git a/src/hooks/useSevenTvEmotes.ts b/src/hooks/useSevenTvEmotes.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { skipToken, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
 enum EmoteSetFlag {
@@ -239,19 +239,20 @@ export function useSevenTvEmotes(userId?: string) {
   });
 
   const { data: channel } = useQuery({
-    enabled: !!userId,
+    enabled: Boolean(userId),
     queryKey: ["sevenTvChannelEmotes", userId],
-    queryFn: () =>
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      fetch(`https://7tv.io/v3/users/twitch/${userId}`)
-        .then((response) => response.json())
-        .then(
-          ({
-            emote_set: { emotes },
-          }: {
-            emote_set: { emotes: SevenTvEmoteModel[] };
-          }) => emotes
-        ),
+    queryFn: userId
+      ? () =>
+          fetch(`https://7tv.io/v3/users/twitch/${userId}`)
+            .then((response) => response.json())
+            .then(
+              ({
+                emote_set: { emotes },
+              }: {
+                emote_set: { emotes: SevenTvEmoteModel[] };
+              }) => emotes
+            )
+      : skipToken,
     select: makeChannelFragments,
   });