Merge pull request #570 from audioverse-org/prefetching-and-hydration…

…-fixes

AV-1153: Fix prefetching and hydration

audit-ci.json

@@ -26,6 +26,7 @@
 		"GHSA-qw6h-vgh9-j6wx", // Used by lighthouse CI, not at runtime
 		"GHSA-m6fv-jmcg-4jfg", // Used by lighthouse CI, not at runtime
 		"GHSA-m6fv-jmcg-4jfg", // Used by lighthouse CI, not at runtime
-		"GHSA-cm22-4g7w-348p" // Used by lighthouse CI, not at runtime
+		"GHSA-cm22-4g7w-348p", // Used by lighthouse CI, not at runtime
+		"GHSA-gp8f-8m3g-qvj9" // Deployments on Vercel are not affected
 	]
 }

graphql-codegen/graphql-plugin-prefetch.ts

@@ -26,8 +26,13 @@ const options = { cacheTime: 24 * 60 * 60 * 1000 };
 
 async function doPrefetch<T extends Key>(k: T, v: Vars[T], client: QueryClient) {
 	const r = await fns[k](v as any);
-	await client.prefetchQuery([k, v], () => r, options);
-	await client.prefetchInfiniteQuery([\`\${k}.infinite\`, v], () => r, options);	
+
+	const hasVars = Object.keys(v as any).length > 0;
+	const queryKey = hasVars ? [k, v] : [k];
+	const infiniteQueryKey = hasVars ? [\`\${k}.infinite\`, v] : [\`\${k}.infinite\`];
+
+	await client.prefetchQuery(queryKey, () => r, options);
+	await client.prefetchInfiniteQuery(infiniteQueryKey, () => r, options);
 }
 
 export async function prefetchQueries(

package.json

@@ -59,6 +59,7 @@
         "react-facebook-login": "^4.1.1",
         "react-google-login": "^5.2.2",
         "react-intl": "^6.4.4",
+        "rollup": "^2.79.2",
         "sass": "^1.42.1",
         "sharp": "^0.33.4",
         "striptags": "^3.2.0",
@@ -144,6 +145,11 @@
         "type-fest": "^4.3.1",
         "typescript": "^5.1.6"
     },
+    "overrides": {
+        "next-pwa": {
+            "rollup": "$rollup"
+        }
+    },
     "nextBundleAnalysis": {
         "budget": 230400,
         "budgetPercentIncreaseRed": 5,

src/components/HOCs/withAuthGuard.spec.tsx

@@ -9,10 +9,9 @@ import React, { ReactElement } from 'react';
 import withAuthGuard from '~components/HOCs/withAuthGuard';
 import { RegisterSocialDocument } from '~containers/account/__generated__/register';
 import { fetchApi } from '~lib/api/fetchApi';
+import { GetIsAuthenticatedDocument } from '~lib/hooks/__generated__/useIsAuthenticated';
 import renderWithProviders from '~lib/test/renderWithProviders';
 
-import { GetWithAuthGuardDataDocument } from './__generated__/withAuthGuard';
-
 function render() {
 	const Comp = withAuthGuard(() => <>hello world</>);
 	return (async function (
@@ -27,7 +26,7 @@ describe('withAuthGuard', () => {
 	beforeEach(() => __loadRouter({ query: {} }));
 	it('displays login if no email', async () => {
 		when(fetchApi)
-			.calledWith(GetWithAuthGuardDataDocument, expect.anything())
+			.calledWith(GetIsAuthenticatedDocument, expect.anything())
 			.mockResolvedValue({
 				me: {
 					user: {
@@ -74,7 +73,7 @@ describe('withAuthGuard', () => {
 			});
 
 		when(fetchApi)
-			.calledWith(GetWithAuthGuardDataDocument, expect.anything())
+			.calledWith(GetIsAuthenticatedDocument, expect.anything())
 			.mockResolvedValue({
 				me: {
 					user: {

src/components/HOCs/withAuthGuard.tsx

@@ -11,9 +11,9 @@ function withAuthGuard<P extends React.JSX.IntrinsicAttributes>(
 ): React.ComponentType<P> {
 	function WithAuthGuard(props: P) {
 		const sessionToken = getSessionToken(getCurrentRequest());
-		const { isUserLoggedIn, isLoading } = useIsAuthenticated();
+		const { isUserLoggedIn, isFetching } = useIsAuthenticated();
 
-		return (sessionToken && isLoading) || isUserLoggedIn ? (
+		return (sessionToken && isFetching) || isUserLoggedIn ? (
 			<Component {...props} />
 		) : (
 			<LoggedOutComponent />

src/components/molecules/player.tsx

@@ -3,7 +3,6 @@ import Image from 'next/legacy/image';
 import React, { useContext, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { useGetWithAuthGuardDataQuery } from '~components/HOCs/__generated__/withAuthGuard';
 import ButtonDownload from '~components/molecules/buttonDownload';
 import ButtonNudge from '~components/molecules/buttonNudge';
 import ButtonPlay, {
@@ -15,7 +14,6 @@ import PlaybackTimes from '~components/molecules/playbackTimes';
 import RecordingProgressBar from '~components/molecules/recordingProgressBar';
 import { AndMiniplayerFragment } from '~components/templates/__generated__/andMiniplayer';
 import { BaseColors } from '~lib/constants';
-import { getSessionToken } from '~lib/cookies';
 import hasVideo from '~lib/hasVideo';
 import useGlobalSpaceDown from '~lib/useGlobalSpaceDown';
 import usePlaybackSession from '~lib/usePlaybackSession';
@@ -24,6 +22,7 @@ import IconChromeCast from '~public/img/icon-chromecast.svg';
 import IconFullscreen from '~public/img/icons/icon-fullscreen.svg';
 import IconPause from '~public/img/icons/icon-pause-large.svg';
 import IconPlay from '~public/img/icons/icon-play-large.svg';
+import useIsAuthenticated from '~src/lib/hooks/useIsAuthenticated';
 
 import { PlaybackContext } from '../templates/andPlaybackContext';
 import { PlayerFragment } from './__generated__/player';
@@ -84,15 +83,7 @@ const Player = ({
 		? BaseColors.WHITE
 		: BaseColors.DARK;
 
-	const sessionToken = getSessionToken(); // i will see if this give any issue
-	const authResult = useGetWithAuthGuardDataQuery(
-		{},
-		{
-			enabled: !!sessionToken,
-			retry: false,
-		}
-	);
-	const user = authResult.data?.me?.user;
+	const { isUserLoggedIn } = useIsAuthenticated();
 
 	return (
 		<div
@@ -244,7 +235,7 @@ const Player = ({
 					)}
 
 					<ButtonSpeed {...{ recording, backgroundColor }} />
-					{user ? (
+					{isUserLoggedIn ? (
 						<ButtonDownload {...{ recording, backgroundColor }} />
 					) : (
 						<ButtonDownloadBlank backgroundColor={backgroundColor} />

src/components/organisms/navigation.tsx

@@ -6,7 +6,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import Heading3 from '~components/atoms/heading3';
 import Heading6 from '~components/atoms/heading6';
-import { useGetWithAuthGuardDataQuery } from '~components/HOCs/__generated__/withAuthGuard';
 import Button from '~components/molecules/button';
 import DownloadAppButton from '~components/molecules/downloadAppButton';
 import LanguageButton from '~components/molecules/languageButton';
@@ -21,6 +20,7 @@ import IconUser from '~public/img/icons/fa-user-heavy.svg';
 import IconDisclosure from '~public/img/icons/icon-disclosure-light-small.svg';
 import IconExit from '~public/img/icons/icon-exit.svg';
 import { BaseColors } from '~src/lib/constants';
+import useIsAuthenticated from '~src/lib/hooks/useIsAuthenticated';
 
 import { analytics } from '../../lib/analytics';
 import IconButton from '../molecules/iconButton';
@@ -62,14 +62,7 @@ const Navigation = ({
 		}
 	}, [router.asPath, sessionToken]);
 
-	const authResult = useGetWithAuthGuardDataQuery(
-		{},
-		{
-			enabled: !!sessionToken,
-			retry: false,
-		}
-	);
-	const user = authResult.data?.me?.user;
+	const { user } = useIsAuthenticated();
 
 	const navigationItems = useNavigationItems();
 	const submenuItem = navigationItems.find(

src/containers/library/playlist/libraryPlaylistDetail.tsx

@@ -1,22 +1,18 @@
-import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import NotFound from '~components/organisms/notFound';
 import PlaylistDetail from '~containers/library/playlist/detail';
 import LoadingCards from '~src/components/molecules/loadingCards';
 
-import { getLibraryPlaylistPageData } from './__generated__/detail';
+import { useGetLibraryPlaylistPageDataQuery } from './__generated__/detail';
 
 function LibraryPlaylistDetail(): JSX.Element {
 	const router = useRouter();
 	const playlistId = router.query.playlist as string;
-
-	const { data, isLoading } = useQuery(
-		['getLibraryPlaylistPageData', { id: playlistId }],
-		() => getLibraryPlaylistPageData({ id: playlistId }),
-		{ staleTime: Infinity }
-	);
+	const { data, isLoading } = useGetLibraryPlaylistPageDataQuery({
+		id: playlistId,
+	});
 
 	if (isLoading) {
 		return <LoadingCards />;

src/containers/sponsor/list/all.graphql

@@ -1,4 +1,4 @@
-query getSponsorListAllPageData($language: Language!, $after: String) {
+query getSponsorListAllPageData($language: Language!, $after: String = null) {
 	sponsors(
 		language: $language
 		orderBy: [{ field: TITLE, direction: ASC }]

src/containers/sponsor/list/all.tsx

@@ -1,15 +1,13 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
 import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
-import { fetchApi } from '~lib/api/fetchApi';
 import useOnScreen from '~lib/hooks/useOnScreen';
 import { useLanguageId } from '~lib/useLanguageId';
 import { Maybe } from '~src/__generated__/graphql';
 
 import {
-	GetSponsorListAllPageDataDocument,
 	GetSponsorListAllPageDataQuery,
+	useInfiniteGetSponsorListAllPageDataQuery,
 } from './__generated__/all';
 import Sponsors, { SponsorsProps } from './list';
 
@@ -21,29 +19,32 @@ export default function AllSponsors(props: Props) {
 	const hasReachedEnd = useOnScreen(endRef);
 	const language = useLanguageId();
 
-	const { data, hasNextPage, fetchNextPage, isLoading } = useInfiniteQuery(
-		['sponsors'],
-		({ pageParam = null }) =>
-			fetchApi(GetSponsorListAllPageDataDocument, {
-				variables: {
-					language,
-					after: pageParam,
+	const { data, hasNextPage, fetchNextPage, isLoading, isFetchingNextPage } =
+		useInfiniteGetSponsorListAllPageDataQuery(
+			'after',
+			{ language },
+			{
+				getNextPageParam: (lastPage: Maybe<GetSponsorListAllPageDataQuery>) => {
+					const pageInfo = lastPage?.sponsors.pageInfo;
+					if (!pageInfo?.hasNextPage) return;
+					return { language, after: pageInfo.endCursor };
 				},
-			}),
-		{
-			getNextPageParam: (lastPage: Maybe<GetSponsorListAllPageDataQuery>) =>
-				lastPage?.sponsors.pageInfo.hasNextPage
-					? lastPage.sponsors.pageInfo.endCursor
-					: undefined,
-		}
-	);
+			}
+		);
 
 	useEffect(() => {
 		if (!hasNextPage) return;
 		if (!hasReachedEnd) return;
 		if (isLoading) return;
+		if (isFetchingNextPage) return;
 		fetchNextPage();
-	}, [hasNextPage, hasReachedEnd, fetchNextPage, isLoading]);
+	}, [
+		hasNextPage,
+		hasReachedEnd,
+		fetchNextPage,
+		isLoading,
+		isFetchingNextPage,
+	]);
 
 	const sponsors = data?.pages.flatMap((p) => p?.sponsors.nodes || []) || [];
 

src/lib/api/login.ts

@@ -6,7 +6,7 @@ import { analytics } from '../analytics';
 import { login as _login } from './__generated__/login';
 
 export const USER_SESSION_QUERY_KEYS = [
-	['getWithAuthGuardData'],
+	['getIsAuthenticated'],
 	['getProfileData'],
 	['isCollectionFavorited'],
 	['collectionIsFavorited'],

src/components/HOCs/withAuthGuard.graphql → src/lib/hooks/useIsAuthenticated.graphql

@@ -1,4 +1,4 @@
-query getWithAuthGuardData {
+query getIsAuthenticated {
 	me {
 		user {
 			email

src/lib/hooks/useIsAuthenticated.ts

@@ -1,22 +1,15 @@
-import { UseQueryResult } from '@tanstack/react-query';
+import { useGetIsAuthenticatedQuery } from './__generated__/useIsAuthenticated';
 
-import {
-	GetWithAuthGuardDataQuery,
-	useGetWithAuthGuardDataQuery,
-} from '~components/HOCs/__generated__/withAuthGuard';
-import { getSessionToken } from '~lib/cookies';
-
-export default function useIsAuthenticated(): UseQueryResult<
-	GetWithAuthGuardDataQuery,
-	unknown
-> & {
+export default function useIsAuthenticated(): {
 	isUserLoggedIn: boolean;
+	isFetching: boolean;
+	user?: { name: string; email: string };
 } {
-	const token = getSessionToken();
-	const result = useGetWithAuthGuardDataQuery({}, { retry: false });
+	const { data, isFetching } = useGetIsAuthenticatedQuery({}, { retry: false });
 
 	return {
-		...result,
-		isUserLoggedIn: !!token && !!result.data?.me?.user.email,
+		isUserLoggedIn: !!data?.me?.user.email,
+		isFetching,
+		user: data?.me?.user,
 	};
 }

src/lib/test/loadAuthGuardData.ts

@@ -1,14 +1,14 @@
 import { when } from 'jest-when';
 import Cookie from 'js-cookie';
 
-import { GetWithAuthGuardDataDocument } from '~components/HOCs/__generated__/withAuthGuard';
 import { fetchApi } from '~lib/api/fetchApi';
+import { GetIsAuthenticatedDocument } from '~lib/hooks/__generated__/useIsAuthenticated';
 
 export function loadAuthGuardData(email: any = 'the_email'): void {
 	Cookie.get = jest.fn().mockReturnValue({ avSession: 'abc123' });
 
 	when(fetchApi)
-		.calledWith(GetWithAuthGuardDataDocument, expect.anything())
+		.calledWith(GetIsAuthenticatedDocument, expect.anything())
 		.mockResolvedValue({
 			me: {
 				user: {

src/pages/[language]/discover/index.ts

@@ -40,6 +40,8 @@ export async function getStaticProps({
 		getSectionPresenters: { language },
 		getSectionBibleBooks: { language },
 		getSectionTrendingMusic: { language },
+		getSectionEgwAudiobooks: { language },
+		getSectionAudiobooks: { language },
 	});
 
 	return {