diff --git a/components/fee-button.js b/components/fee-button.js index 6b47f25b..7bb11a23 100644 --- a/components/fee-button.js +++ b/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 diff --git a/components/footer-rewards.js b/components/footer-rewards.js index ea81b920..51862cf5 100644 --- a/components/footer-rewards.js +++ b/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 ( diff --git a/components/header.js b/components/header.js index 07fd7532..68e18009 100644 --- a/components/header.js +++ b/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, { - pollInterval: 30000, - nextFetchPolicy: 'cache-and-network' - }) + const { data } = useQuery(HAS_NOTIFICATIONS, SSR + ? {} + : { + pollInterval: 30000, + nextFetchPolicy: 'cache-and-network' + }) return ( <> diff --git a/components/lightning-auth.js b/components/lightning-auth.js index dbb1860e..8cb07e47 100644 --- a/components/lightning-auth.js +++ b/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) { diff --git a/components/me.js b/components/me.js index be5360ef..4b9b4121 100644 --- a/components/me.js +++ b/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 diff --git a/components/price.js b/components/price.js index 15bd7d49..4a36494c 100644 --- a/components/price.js +++ b/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, - nextFetchPolicy: 'cache-and-network' + ...(SSR + ? {} + : { + pollInterval: 30000, + nextFetchPolicy: 'cache-and-network' + }) }) const contextValue = { diff --git a/lib/apollo.js b/lib/apollo.js index 25ba82d5..83f36b12 100644 --- a/lib/apollo.js +++ b/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 diff --git a/lib/constants.js b/lib/constants.js index 3af84eca..1a81920d 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -44,3 +44,4 @@ export const ITEM_TYPES = context => { } export const OLD_ITEM_DAYS = 3 +export const SSR = typeof window === 'undefined' diff --git a/pages/_app.js b/pages/_app.js index 6280e607..60abdb19 100644 --- a/pages/_app.js +++ b/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' - -const SSR = typeof window === 'undefined' +import { SSR } from '../lib/constants' function writeQuery (client, apollo, data) { if (apollo && data) { diff --git a/pages/invites/index.js b/pages/invites/index.js index a552eaae..fdb84c94 100644 --- a/pages/invites/index.js +++ b/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) => { diff --git a/pages/invoices/[id].js b/pages/invoices/[id].js index 7ff3cec9..edd5c3d2 100644 --- a/pages/invoices/[id].js +++ b/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, { - pollInterval: 1000, - variables: { id: router.query.id }, - nextFetchPolicy: 'cache-and-network' - }) + const { data, error } = useQuery(INVOICE, SSR + ? {} + : { + pollInterval: 1000, + variables: { id: router.query.id }, + nextFetchPolicy: 'cache-and-network' + }) return ( diff --git a/pages/rewards.js b/pages/rewards.js index 185e05f4..98076275 100644 --- a/pages/rewards.js +++ b/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: () =>
Loading...
@@ -47,11 +48,7 @@ function midnight (tz) { export const getServerSideProps = getGetServerSideProps(REWARDS) export function RewardLine ({ total }) { - const [threshold, setThreshold] = useState(0) - - useEffect(() => { - setThreshold(midnight('America/Chicago')) - }, []) + const threshold = useMemo(() => midnight('America/Chicago')) return ( <> @@ -59,14 +56,14 @@ export function RewardLine ({ total }) { {threshold && {props.formatted.hours}:{props.formatted.minutes}:{props.formatted.seconds}} + renderer={props => {props.formatted.hours}:{props.formatted.minutes}:{props.formatted.seconds}} />} ) } 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 const { expectedRewards: { total, sources } } = data || ssrData diff --git a/pages/wallet.js b/pages/wallet.js index 35725ca1..961ae3b6 100644 --- a/pages/wallet.js +++ b/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}`) diff --git a/pages/withdrawals/[id].js b/pages/withdrawals/[id].js index c413abb5..d44cd6c2 100644 --- a/pages/withdrawals/[id].js +++ b/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, { - variables: { id: router.query.id }, - pollInterval: 1000, - nextFetchPolicy: 'cache-and-network' - }) + const { loading, error, data } = useQuery(WITHDRAWL, SSR + ? {} + : { + variables: { id: router.query.id }, + pollInterval: 1000, + nextFetchPolicy: 'cache-and-network' + }) if (error) return
error
if (!data || loading) { return