chore: don't run client side query until token is available

tubearchivist/www/src/components/VideoList.tsx

@@ -14,8 +14,12 @@ export const VideoList = () => {
   const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
   const { data: session } = useSession();
-  const { data, error, isLoading } = useQuery("videos", () =>
-    getVideos(session.ta_token.token)
+  const { data, error, isLoading } = useQuery(
+    ["videos", session?.ta_token?.token],
+    () => getVideos(session.ta_token.token),
+    {
+      enabled: !!session?.ta_token?.token,
+    }
   );
 
   const handleSelectedVideo = (video: Datum) => {

tubearchivist/www/src/lib/getVideos.ts

@@ -22,5 +22,3 @@ export const getVideos = async (token: string): Promise<Videos> => {
 
   return response.json();
 };
-
-// b4d4330462c7fc16c51873e45579b29a1a12fc90

tubearchivist/www/src/pages/channel.tsx

@@ -36,8 +36,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 const Channel: NextPage = () => {
   const { data: session } = useSession();
   const {
-    data: { data: channels },
-  } = useQuery("channels", () => getChannels(session.ta_token.token));
+    data: channels,
+    error,
+    isLoading,
+  } = useQuery("channels", () => getChannels(session.ta_token.token), {
+    enabled: !!session?.ta_token?.token,
+  });
+
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
 
   const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
@@ -104,12 +109,12 @@ const Channel: NextPage = () => {
               />
             </div>
           </div>
-          <h2>Total matching channels: {channels?.length} </h2>
+          <h2>Total matching channels: {channels?.data?.length} </h2>
           <div className={`channel-list ${viewStyle}`}>
-            {!channels ? (
+            {!channels.data ? (
               <h2>No channels found...</h2>
             ) : (
-              channels?.map((channel) => {
+              channels?.data.map((channel) => {
                 return (
                   <div
                     key={channel?.channel_id}