From 42548cea2ac59f5c94c0bd5e579f8e9bfb162e45 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Wed, 31 Aug 2022 21:59:58 -0700
Subject: [PATCH] Fix prefetching to not populate useless state (#827)

---
 web/hooks/use-contracts.ts         |  8 ++++++++
 web/hooks/use-portfolio-history.ts | 19 ++++++++++++++++---
 web/hooks/use-prefetch.ts          | 12 ++++++------
 web/hooks/use-user-bets.ts         |  6 ++++++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/web/hooks/use-contracts.ts b/web/hooks/use-contracts.ts
index 3ec1c56c..83be4636 100644
--- a/web/hooks/use-contracts.ts
+++ b/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],
diff --git a/web/hooks/use-portfolio-history.ts b/web/hooks/use-portfolio-history.ts
index d01ca29b..5abfdf11 100644
--- a/web/hooks/use-portfolio-history.ts
+++ b/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)
diff --git a/web/hooks/use-prefetch.ts b/web/hooks/use-prefetch.ts
index e22e13eb..3724d456 100644
--- a/web/hooks/use-prefetch.ts
+++ b/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')
 }
diff --git a/web/hooks/use-user-bets.ts b/web/hooks/use-user-bets.ts
index ff1b23b3..a989636f 100644
--- a/web/hooks/use-user-bets.ts
+++ b/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],