fix: resolve type related issues

src/api/hooks/index.ts

@@ -1,12 +1,12 @@
 import { createQuery, createInfiniteQuery } from "react-query-kit";
-import { AxiosError } from "axios";
 import {
   getCityName,
   getCurrentLocation,
   getQuotes,
   getWeather,
   getPhotos,
   getCloudPhotos,
+  getLocation,
 } from "@api";
 
 export const useQuotes = createQuery({
@@ -27,7 +27,6 @@ export const useQuotes = createQuery({
   },
   initialDataUpdatedAt: Date.now() + 1000 * 60 * 60 * 4,
   staleTime: 1000 * 60 * 60 * 4, // 4 hours
-  suspense: true,
 });
 
 export const useCurrentLocation = createQuery({
@@ -50,7 +49,7 @@ export const useCityName = createQuery<
 });
 
 export const useWeather = createQuery<
-  ReturnType<typeof getWeather> extends Promise<infer T> ? T : AxiosError,
+  Awaited<ReturnType<typeof getWeather>>,
   { longitude: number; latitude: number }
 >({
   primaryKey: "weather",
@@ -68,6 +67,7 @@ export const usePhotos = createQuery({
 });
 
 export const useCloudPhotos = createInfiniteQuery({
+  initialPageParam: 0,
   primaryKey: "cloud-photos",
   queryFn: ({ pageParam = 0 }) => {
     // if variable.fetchmore is true, append the result to the already existing photos
@@ -81,3 +81,14 @@ export const useCloudPhotos = createInfiniteQuery({
     return pages.length + 1;
   },
 });
+
+export const useLocation = createQuery<
+  Awaited<ReturnType<typeof getLocation>>,
+  { query: string }
+>({
+  primaryKey: "location",
+  queryFn: ({ queryKey }) => {
+    return getLocation(queryKey[1].query);
+  },
+  staleTime: 1000 * 60 * 60 * 24, // 24 hours
+});

src/components/inc/SideBar/WeatherTab.tsx

@@ -3,12 +3,16 @@ import { Box, Text, Flex } from "@components/base";
 import { styled } from "stitches.config";
 import { SearchIcon } from "@components/icons";
 import { Combobox } from "@headlessui/react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { getLocation } from "@api";
+import { useQueryClient } from "@tanstack/react-query";
 import { Coordinates } from "@api/types";
 import useStore from "@store";
 import { shallow } from "zustand/shallow";
-import { useCityName, useCurrentLocation, useWeather } from "@api/hooks";
+import {
+  useCityName,
+  useCurrentLocation,
+  useLocation,
+  useWeather,
+} from "@api/hooks";
 
 const WeatherTab = () => {
   return (
@@ -51,7 +55,9 @@ function WeatherUnitSelect() {
   const queryClient = useQueryClient();
   function setUnitAndRefetch(unit: "fahrenheit" | "celsius") {
     setUnit(unit);
-    queryClient.invalidateQueries(useWeather.getKey());
+    queryClient.invalidateQueries({
+      queryKey: useWeather.getKey(),
+    });
   }
   return (
     <Flex gap={2}>
@@ -74,13 +80,10 @@ function LocationFinder() {
   const [value, setValue] = useState("");
   const deferredValue = useDeferredValue(value);
   const queryClient = useQueryClient();
-  const { isError, isLoading, data } = useQuery(
-    ["location", deferredValue],
-    () => getLocation(value),
-    {
-      keepPreviousData: true,
-    },
-  );
+
+  const { isError, isLoading, data } = useLocation({
+    variables: { query: deferredValue },
+  });
   const [selectedLocation, setSelectedLocation] = useState<null | Coordinates>(
     null,
   );

src/components/inc/ThemeCategories.tsx

@@ -4,13 +4,12 @@ import { Button } from "@components/base/Button";
 import useStore from "@store";
 import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
-import { styled } from "stitches.config";
 import { shallow } from "zustand/shallow";
 
 const ThemeCategories = () => {
   const [keywords, setKeywords] = useStore(
     (state) => [state.keywords, state.setKeywords],
-    shallow
+    shallow,
   );
   const queryClient = useQueryClient();
   function onClick(keyword: string) {
@@ -21,7 +20,7 @@ const ThemeCategories = () => {
       // add keyword
       setKeywords([...keywords, keyword]);
     }
-    queryClient.invalidateQueries(useCloudPhotos.getKey());
+    queryClient.invalidateQueries({ queryKey: useCloudPhotos.getKey() });
   }
 
   return (

src/components/inc/widgets/Quotes.tsx

@@ -12,8 +12,7 @@ import { withTour } from "@components/base/Tour";
 function Quotes() {
   const {
     data: quote,
-    isLoading,
-    isError,
+    isSuccess,
     refetch: getQuotes,
   } = useQuotes({
     select: (d) => ({ id: d._id, text: d.content, author: d.author }) as Quote,
@@ -27,7 +26,7 @@ function Quotes() {
     ],
     shallow,
   );
-  if (isLoading || isError) return null;
+  if (!isSuccess) return null;
   const tweetText = `I love this quote by ${quote.author}!
 “${quote.text}”`;
   const favourite = favouriteQuotes.includes(quote);

src/main.tsx

@@ -13,7 +13,7 @@ import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persist
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
     },
   },
 });
@@ -38,5 +38,5 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         <Router />
       </ErrorBoundary>
     </PersistQueryClientProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );