Fix prefetching to not populate useless state (#827)

web/hooks/use-contracts.ts

@@ -11,6 +11,7 @@ import {
   listenForNewContracts,
   getUserBetContractsQuery,
 } from 'web/lib/firebase/contracts'
+import { QueryClient } from 'react-query'
 
 export const useContracts = () => {
   const [contracts, setContracts] = useState<Contract[] | undefined>()
@@ -92,6 +93,13 @@ export const useUpdatedContracts = (contracts: Contract[] | undefined) => {
     : undefined
 }
 
+const queryClient = new QueryClient()
+
+export const prefetchUserBetContracts = (userId: string) =>
+  queryClient.prefetchQuery(['contracts', 'bets', userId], () =>
+    getUserBetContractsQuery(userId)
+  )
+
 export const useUserBetContracts = (userId: string) => {
   const result = useFirestoreQueryData(
     ['contracts', 'bets', userId],

web/hooks/use-portfolio-history.ts

@@ -1,11 +1,24 @@
+import { QueryClient } from 'react-query'
 import { useFirestoreQueryData } from '@react-query-firebase/firestore'
 import { DAY_MS, HOUR_MS } from 'common/util/time'
 import { getPortfolioHistoryQuery, Period } from 'web/lib/firebase/users'
 
-export const usePortfolioHistory = (userId: string, period: Period) => {
-  const nowRounded = Math.round(Date.now() / HOUR_MS) * HOUR_MS
-  const cutoff = periodToCutoff(nowRounded, period).valueOf()
+const queryClient = new QueryClient()
 
+const getCutoff = (period: Period) => {
+  const nowRounded = Math.round(Date.now() / HOUR_MS) * HOUR_MS
+  return periodToCutoff(nowRounded, period).valueOf()
+}
+
+export const prefetchPortfolioHistory = (userId: string, period: Period) => {
+  const cutoff = getCutoff(period)
+  return queryClient.prefetchQuery(['portfolio-history', userId, cutoff], () =>
+    getPortfolioHistoryQuery(userId, cutoff)
+  )
+}
+
+export const usePortfolioHistory = (userId: string, period: Period) => {
+  const cutoff = getCutoff(period)
   const result = useFirestoreQueryData(
     ['portfolio-history', userId, cutoff],
     getPortfolioHistoryQuery(userId, cutoff)

web/hooks/use-prefetch.ts

@@ -1,11 +1,11 @@
-import { useUserBetContracts } from './use-contracts'
-import { usePortfolioHistory } from './use-portfolio-history'
-import { useUserBets } from './use-user-bets'
+import { prefetchUserBetContracts } from './use-contracts'
+import { prefetchPortfolioHistory } from './use-portfolio-history'
+import { prefetchUserBets } from './use-user-bets'
 
 export function usePrefetch(userId: string | undefined) {
   const maybeUserId = userId ?? ''
 
-  useUserBets(maybeUserId)
-  useUserBetContracts(maybeUserId)
-  usePortfolioHistory(maybeUserId, 'weekly')
+  prefetchUserBets(maybeUserId)
+  prefetchUserBetContracts(maybeUserId)
+  prefetchPortfolioHistory(maybeUserId, 'weekly')
 }

web/hooks/use-user-bets.ts

@@ -1,3 +1,4 @@
+import { QueryClient } from 'react-query'
 import { useFirestoreQueryData } from '@react-query-firebase/firestore'
 import { useEffect, useState } from 'react'
 import {
@@ -6,6 +7,11 @@ import {
   listenForUserContractBets,
 } from 'web/lib/firebase/bets'
 
+const queryClient = new QueryClient()
+
+export const prefetchUserBets = (userId: string) =>
+  queryClient.prefetchQuery(['bets', userId], () => getUserBetsQuery(userId))
+
 export const useUserBets = (userId: string) => {
   const result = useFirestoreQueryData(
     ['bets', userId],