fix conditional nextFetchPolicy overriding cache-only on SSR and suppress time hydration warnings

components/fee-button.js

@@ -4,6 +4,7 @@ import Info from './info'
 import styles from './fee-button.module.css'
 import { gql, useQuery } from '@apollo/client'
 import { useFormikContext } from 'formik'
+import { SSR } from '../lib/constants'
 
 function Receipt ({ cost, repetition, hasImgLink, baseFee, parentId, boost }) {
   return (
@@ -43,7 +44,7 @@ export default function FeeButton ({ parentId, hasImgLink, baseFee, ChildButton,
   const query = parentId
     ? gql`{ itemRepetition(parentId: "${parentId}") }`
     : gql`{ itemRepetition }`
-  const { data } = useQuery(query, { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(query, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
   const repetition = data?.itemRepetition || 0
   const formik = useFormikContext()
   const boost = Number(formik?.values?.boost) || 0

components/footer-rewards.js

@@ -1,6 +1,7 @@
 import { gql, useQuery } from '@apollo/client'
 import Link from 'next/link'
 import { RewardLine } from '../pages/rewards'
+import { SSR } from '../lib/constants'
 
 const REWARDS = gql`
 {
@@ -10,7 +11,7 @@ const REWARDS = gql`
 }`
 
 export default function Rewards () {
-  const { data } = useQuery(REWARDS, { pollInterval: 60000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(REWARDS, SSR ? { ssr: false } : { pollInterval: 60000, nextFetchPolicy: 'cache-and-network' })
   const total = data?.expectedRewards?.total
 
   return (

components/header.js

@@ -20,7 +20,7 @@ import CowboyHat from './cowboy-hat'
 import { Select } from './form'
 import SearchIcon from '../svgs/search-line.svg'
 import BackArrow from '../svgs/arrow-left-line.svg'
-import { SUBS } from '../lib/constants'
+import { SSR, SUBS } from '../lib/constants'
 import { useLightning } from './lightning'
 import { HAS_NOTIFICATIONS } from '../fragments/notifications'
 
@@ -34,7 +34,7 @@ function Back () {
   const [show, setShow] = useState()
 
   useEffect(() => {
-    setShow(typeof window !== 'undefined' && router.asPath !== '/' &&
+    setShow(router.asPath !== '/' &&
     (typeof window.navigation === 'undefined' || window.navigation.canGoBack === undefined || window?.navigation.canGoBack))
   }, [router.asPath])
 
@@ -45,10 +45,12 @@ function Back () {
 }
 
 function NotificationBell () {
-  const { data } = useQuery(HAS_NOTIFICATIONS, {
+  const { data } = useQuery(HAS_NOTIFICATIONS, SSR
-    pollInterval: 30000,
+    ? {}
-    nextFetchPolicy: 'cache-and-network'
+    : {
-  })
+        pollInterval: 30000,
+        nextFetchPolicy: 'cache-and-network'
+      })
 
   return (
     <>

components/lightning-auth.js

@@ -9,6 +9,7 @@ import Qr, { QrSkeleton } from './qr'
 import styles from './lightning-auth.module.css'
 import BackIcon from '../svgs/arrow-left-line.svg'
 import { useRouter } from 'next/router'
+import { SSR } from '../lib/constants'
 
 function QrAuth ({ k1, encodedUrl, slashtagUrl, callbackUrl }) {
   const query = gql`
@@ -18,7 +19,7 @@ function QrAuth ({ k1, encodedUrl, slashtagUrl, callbackUrl }) {
       k1
     }
   }`
-  const { data } = useQuery(query, { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(query, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
 
   useEffect(() => {
     if (data?.lnAuth?.pubkey) {

components/me.js

@@ -1,13 +1,14 @@
 import React, { useContext } from 'react'
 import { useQuery } from '@apollo/client'
 import { ME } from '../fragments/users'
+import { SSR } from '../lib/constants'
 
 export const MeContext = React.createContext({
   me: null
 })
 
 export function MeProvider ({ me, children }) {
-  const { data } = useQuery(ME, { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(ME, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
 
   const contextValue = {
     me: data?.me || me

components/price.js

@@ -4,6 +4,7 @@ import { fixedDecimal } from '../lib/format'
 import { useMe } from './me'
 import { PRICE } from '../fragments/price'
 import { CURRENCY_SYMBOLS } from '../lib/currency'
+import { SSR } from '../lib/constants'
 
 export const PriceContext = React.createContext({
   price: null,
@@ -19,8 +20,12 @@ export function PriceProvider ({ price, children }) {
   const fiatCurrency = me?.fiatCurrency
   const { data } = useQuery(PRICE, {
     variables: { fiatCurrency },
-    pollInterval: 30000,
+    ...(SSR
-    nextFetchPolicy: 'cache-and-network'
+      ? {}
+      : {
+          pollInterval: 30000,
+          nextFetchPolicy: 'cache-and-network'
+        })
   })
 
   const contextValue = {

lib/apollo.js

@@ -1,5 +1,6 @@
 import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
 import { decodeCursor, LIMIT } from './cursor'
+import { SSR } from './constants'
 
 function isFirstPage (cursor, existingThings) {
   if (cursor) {
@@ -12,7 +13,6 @@ function isFirstPage (cursor, existingThings) {
   }
 }
 
-const SSR = typeof window === 'undefined'
 const defaultFetchPolicy = SSR ? 'cache-only' : 'cache-first'
 const defaultNextFetchPolicy = SSR ? 'cache-only' : 'cache-first'
 
@@ -147,11 +147,13 @@ function getClient (uri) {
     assumeImmutableResults: true,
     defaultOptions: {
       watchQuery: {
+        initialFetchPolicy: defaultFetchPolicy,
         fetchPolicy: defaultFetchPolicy,
         nextFetchPolicy: defaultNextFetchPolicy,
         canonizeResults: true
       },
       query: {
+        initialFetchPolicy: defaultFetchPolicy,
         fetchPolicy: defaultFetchPolicy,
         nextFetchPolicy: defaultNextFetchPolicy,
         canonizeResults: true

lib/constants.js

@@ -44,3 +44,4 @@ export const ITEM_TYPES = context => {
 }
 
 export const OLD_ITEM_DAYS = 3
+export const SSR = typeof window === 'undefined'

pages/_app.js

@@ -12,8 +12,7 @@ import { ShowModalProvider } from '../components/modal'
 import ErrorBoundary from '../components/error-boundary'
 import { LightningProvider } from '../components/lightning'
 import { ServiceWorkerProvider } from '../components/serviceworker'
-
+import { SSR } from '../lib/constants'
-const SSR = typeof window === 'undefined'
 
 function writeQuery (client, apollo, data) {
   if (apollo && data) {

pages/invites/index.js

@@ -7,6 +7,7 @@ import AccordianItem from '../../components/accordian-item'
 import styles from '../../styles/invites.module.css'
 import Invite from '../../components/invite'
 import { inviteSchema } from '../../lib/validate'
+import { SSR } from '../../lib/constants'
 
 function InviteForm () {
   const [createInvite] = useMutation(
@@ -93,7 +94,7 @@ export default function Invites () {
           ...InviteFields
         }
       }
-    `, { fetchPolicy: 'cache-and-network' })
+    `, SSR ? {} : { fetchPolicy: 'cache-and-network' })
 
   const [active, inactive] = data && data.invites
     ? data.invites.reduce((result, invite) => {

pages/invoices/[id].js

@@ -4,14 +4,17 @@ import { QrSkeleton } from '../../components/qr'
 import { CenterLayout } from '../../components/layout'
 import { useRouter } from 'next/router'
 import { INVOICE } from '../../fragments/wallet'
+import { SSR } from '../../lib/constants'
 
 export default function FullInvoice () {
   const router = useRouter()
-  const { data, error } = useQuery(INVOICE, {
+  const { data, error } = useQuery(INVOICE, SSR
-    pollInterval: 1000,
+    ? {}
-    variables: { id: router.query.id },
+    : {
-    nextFetchPolicy: 'cache-and-network'
+        pollInterval: 1000,
-  })
+        variables: { id: router.query.id },
+        nextFetchPolicy: 'cache-and-network'
+      })
 
   return (
     <CenterLayout>

pages/rewards.js

@@ -1,5 +1,5 @@
 import { gql } from 'graphql-tag'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import Button from 'react-bootstrap/Button'
 import InputGroup from 'react-bootstrap/InputGroup'
 import { getGetServerSideProps } from '../api/ssrApollo'
@@ -13,6 +13,7 @@ import { abbrNum } from '../lib/format'
 import PageLoading from '../components/page-loading'
 import { useShowModal } from '../components/modal'
 import dynamic from 'next/dynamic'
+import { SSR } from '../lib/constants'
 
 const GrowthPieChart = dynamic(() => import('../components/charts').then(mod => mod.GrowthPieChart), {
   loading: () => <div>Loading...</div>
@@ -47,11 +48,7 @@ function midnight (tz) {
 export const getServerSideProps = getGetServerSideProps(REWARDS)
 
 export function RewardLine ({ total }) {
-  const [threshold, setThreshold] = useState(0)
+  const threshold = useMemo(() => midnight('America/Chicago'))
-
-  useEffect(() => {
-    setThreshold(midnight('America/Chicago'))
-  }, [])
 
   return (
     <>
@@ -59,14 +56,14 @@ export function RewardLine ({ total }) {
       {threshold &&
         <Countdown
           date={threshold}
-          renderer={props => <small className='text-monospace'> {props.formatted.hours}:{props.formatted.minutes}:{props.formatted.seconds}</small>}
+          renderer={props => <small className='text-monospace' suppressHydrationWarning> {props.formatted.hours}:{props.formatted.minutes}:{props.formatted.seconds}</small>}
         />}
     </>
   )
 }
 
 export default function Rewards ({ ssrData }) {
-  const { data } = useQuery(REWARDS, { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(REWARDS, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
   if (!data && !ssrData) return <PageLoading />
 
   const { expectedRewards: { total, sources } } = data || ssrData

pages/wallet.js

@@ -14,6 +14,7 @@ import Alert from 'react-bootstrap/Alert'
 import { CREATE_WITHDRAWL, SEND_TO_LNADDR } from '../fragments/wallet'
 import { getGetServerSideProps } from '../api/ssrApollo'
 import { amountSchema, lnAddrSchema, withdrawlSchema } from '../lib/validate'
+import { SSR } from '../lib/constants'
 
 export const getServerSideProps = getGetServerSideProps()
 
@@ -210,7 +211,7 @@ function LnQRWith ({ k1, encodedUrl }) {
       k1
     }
   }`
-  const { data } = useQuery(query, { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(query, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
 
   if (data?.lnWith?.withdrawalId) {
     router.push(`/withdrawals/${data.lnWith.withdrawalId}`)

pages/withdrawals/[id].js

@@ -6,6 +6,7 @@ import InvoiceStatus from '../../components/invoice-status'
 import { useRouter } from 'next/router'
 import { WITHDRAWL } from '../../fragments/wallet'
 import Link from 'next/link'
+import { SSR } from '../../lib/constants'
 
 export default function Withdrawl () {
   return (
@@ -31,11 +32,13 @@ export function WithdrawlSkeleton ({ status }) {
 
 function LoadWithdrawl () {
   const router = useRouter()
-  const { loading, error, data } = useQuery(WITHDRAWL, {
+  const { loading, error, data } = useQuery(WITHDRAWL, SSR
-    variables: { id: router.query.id },
+    ? {}
-    pollInterval: 1000,
+    : {
-    nextFetchPolicy: 'cache-and-network'
+        variables: { id: router.query.id },
-  })
+        pollInterval: 1000,
+        nextFetchPolicy: 'cache-and-network'
+      })
   if (error) return <div>error</div>
   if (!data || loading) {
     return <WithdrawlSkeleton status='loading' />