feat: use prefetch in the home page

app/all-collections/page.tsx

@@ -1,5 +1,6 @@
+import { dehydrate } from '@tanstack/react-query';
+
 import { Suspense } from 'react';
-import { dehydrate } from 'react-query/core';
 
 import Hydrate from '../../src/components/HydrateClient';
 import Wrapper from '../../src/components/common/Wrapper';

app/collections/[id]/page.tsx

@@ -1,14 +1,4 @@
-// import { useRouter } from 'next/navigation';
-// import { useEffect } from 'react';
-// import ReactGA from 'react-ga4';
-// import { hasAcceptedCookies } from '@graasp/sdk';
-// import { ENV, UrlSearch } from '../src/config/constants';
-// import createEmotionCache from '../src/config/createEmotionCache';
-// import { GA_MEASUREMENT_ID, NODE_ENV } from '../src/config/env';
-// Client-side cache, shared for the whole session of the user in the browser.
-// const clientSideEmotionCache = createEmotionCache();
-// import { Api, DATA_KEYS, configureQueryClient } from '@graasp/query-client';
-import { dehydrate } from 'react-query/core';
+import { dehydrate } from '@tanstack/react-query';
 
 import Hydrate from '../../../src/components/HydrateClient';
 import Collection from '../../../src/components/collection/Collection';

app/liked/page.tsx

@@ -1,4 +1,4 @@
-import { dehydrate } from 'react-query/core';
+import { dehydrate } from '@tanstack/react-query';
 
 import Hydrate from '../../src/components/HydrateClient';
 import Wrapper from '../../src/components/common/Wrapper';

app/members/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { dehydrate } from 'react-query/core';
+import { dehydrate } from '@tanstack/react-query';
 
 import Hydrate from '../../../src/components/HydrateClient';
 import Wrapper from '../../../src/components/common/Wrapper';

app/oer/page.tsx

@@ -1,5 +1,6 @@
+import { dehydrate } from '@tanstack/react-query';
+
 import { Suspense } from 'react';
-import { dehydrate } from 'react-query/core';
 
 import Hydrate from '../../src/components/HydrateClient';
 import Wrapper from '../../src/components/common/Wrapper';

app/page.tsx

@@ -1,11 +1,14 @@
+import { dehydrate } from '@tanstack/react-query';
 import { Metadata } from 'next';
 
-import { dehydrate } from 'react-query/core';
+import { configureQueryClient } from '@graasp/query-client';
 
 import Hydrate from '../src/components/HydrateClient';
 import Wrapper from '../src/components/common/Wrapper';
 import Home from '../src/components/pages/Home';
+import { HOMEPAGE_NB_ELEMENTS_TO_SHOW } from '../src/config/constants';
 import getQueryClient from '../src/config/get-query-client';
+import { QUERY_CLIENT_OPTIONS } from '../src/config/queryClient';
 import LIBRARY from '../src/langs/constants';
 import en from '../src/langs/en.json';
 import { buildSeo } from './seo';
@@ -28,10 +31,27 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const Page = async () => {
+ const { queryOptions } = configureQueryClient(QUERY_CLIENT_OPTIONS);
  const queryClient = getQueryClient();
- // await queryClient.prefetchQuery(['items', 'collections', 'all'], () =>
- // Api.getAllPublishedItems({}, { API_HOST: GRAASP_API_HOST, axios }),
- // );
+
+ await Promise.all([
+ // TODO: uncomment when prefetch works correctly.
+ // queryClient.prefetchQuery(
+ // queryOptions.publishedItemsForMemberOptions(GRAASPER_ID),
+ // ),
+ queryClient.prefetchQuery(
+ queryOptions.mostLikedPublishedItemsOptions({
+ limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
+ }),
+ ),
+ // TODO: Error: Hydration failed because the initial UI does not match what was rendered on the server.
+ // queryClient.prefetchQuery(
+ // queryOptions.mostRecentPublishedItemsOptions({
+ // limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
+ // }),
+ // ),
+ ]);
+
  const dehydratedState = dehydrate(queryClient);
 
  return (

app/providers.tsx

@@ -1,11 +1,10 @@
 'use client';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
-// import { ReactQueryDevtools } from "react-query-devtools";
 import { useEffect, useState } from 'react';
 import ReactGA from 'react-ga4';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { ToastContainer } from 'react-toastify';
 
 import { hasAcceptedCookies } from '@graasp/sdk';
@@ -15,7 +14,8 @@ import { GA_MEASUREMENT_ID, NODE_ENV } from '../src/config/env';
 
 // eslint-disable-next-line react/function-component-definition
 export default function Providers(props: { children: React.ReactNode }) {
- const [client] = useState(new QueryClient());
+ // We pass a function to call it only once at initial rendering (see lazy initialization for more).
+ const [client] = useState(() => new QueryClient());
  const pathname = usePathname();
  const { replace } = useRouter();
  const searchParams = useSearchParams();
@@ -53,7 +53,6 @@ export default function Providers(props: { children: React.ReactNode }) {
  return (
  <QueryClientProvider client={client}>
  {children}
- {/* <ReactQueryDevtools initialIsOpen={false} /> */}
  <ToastContainer stacked theme="colored" />
  </QueryClientProvider>
  );

package.json

@@ -33,7 +33,7 @@
  "@emotion/react": "11.13.0",
  "@emotion/server": "11.11.0",
  "@emotion/styled": "11.13.0",
- "@graasp/query-client": "3.26.0",
+ "@graasp/query-client": "github:graasp/graasp-query-client#947-prefetch-home-page",
  "@graasp/sdk": "4.31.0",
  "@graasp/stylis-plugin-rtl": "2.2.0",
  "@graasp/translations": "1.35.0",
@@ -42,6 +42,7 @@
  "@mui/lab": "5.0.0-alpha.170",
  "@mui/material": "5.16.5",
  "@sentry/nextjs": "8.26.0",
+ "@tanstack/react-query": "5.59.0",
  "@testing-library/jest-dom": "6.4.8",
  "@testing-library/react": "16.0.0",
  "@testing-library/user-event": "14.5.2",
@@ -101,7 +102,6 @@
  "husky": "9.1.4",
  "nyc": "17.0.0",
  "prettier": "3.3.3",
- "react-query": "3.39.3",
  "standard-version": "9.5.0",
  "typescript": "5.5.4",
  "wait-on": "7.2.0"

src/components/HydrateClient.tsx

@@ -1,8 +1,11 @@
 'use client';
 
-import { HydrateProps, Hydrate as RQHydrate } from 'react-query';
+import {
+ HydrationBoundaryProps,
+ HydrationBoundary as RQHydrate,
+} from '@tanstack/react-query';
 
-const Hydrate = (props: HydrateProps) => {
+const Hydrate = (props: HydrationBoundaryProps) => {
  // eslint-disable-next-line react/jsx-props-no-spreading
  return <RQHydrate {...props} />;
 };

src/components/QueryClientContext.tsx

@@ -1,8 +1,10 @@
+import type { DehydratedState } from '@tanstack/react-query';
+
 import React from 'react';
-import type { DehydratedState } from 'react-query';
 
 import { configureQueryClient } from '@graasp/query-client';
 
+import notifier from '../config/notifier';
 import { QUERY_CLIENT_OPTIONS } from '../config/queryClient';
 
 const QueryClientContext = React.createContext(
@@ -14,7 +16,7 @@ type Props = {
 };
 
 const QueryClientProvider = ({ children, dehydratedState }: Props) => {
- const value = configureQueryClient(QUERY_CLIENT_OPTIONS);
+ const value = configureQueryClient({ ...QUERY_CLIENT_OPTIONS, notifier });
  const {
  QueryClientProvider: Provider,
  queryClient,

src/components/common/Wrapper.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ErrorBoundary } from '@sentry/nextjs';
+import type { DehydratedState } from '@tanstack/react-query';
 
 import { Trans } from 'react-i18next';
-import type { DehydratedState } from 'react-query';
 import 'react-toastify/dist/ReactToastify.css';
 
 import { Box, Stack, SxProps } from '@mui/material';

src/components/pages/Home.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useQuery } from '@tanstack/react-query';
+
 import { useContext } from 'react';
 
 import { Box } from '@mui/material';
@@ -24,20 +26,25 @@ import StyledBackgroundContainer from '../layout/StyledBackgroundContainer';
 const Home = () => {
  const { t } = useLibraryTranslation();
 
- const { hooks } = useContext(QueryClientContext);
+ const { queryOptions } = useContext(QueryClientContext);
 
  const { data: graasperCollections, isLoading: isGraasperCollectionsLoading } =
- hooks.usePublishedItemsForMember(GRAASPER_ID);
+ useQuery(queryOptions.publishedItemsForMemberOptions(GRAASPER_ID));
+
  const {
  data: mostLikedCollections,
  isLoading: isMostLikedCollectionsLoading,
- } = hooks.useMostLikedPublishedItems({
- limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
- });
- const { data: recentCollections, isLoading: isMostRecentLoading } =
- hooks.useMostRecentPublishedItems({
+ } = useQuery(
+ queryOptions.mostLikedPublishedItemsOptions({
+ limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
+ }),
+ );
+
+ const { data: recentCollections, isLoading: isMostRecentLoading } = useQuery(
+ queryOptions.mostRecentPublishedItemsOptions({
  limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW,
- });
+ }),
+ );
 
  return (
  <MainWrapper>

src/config/get-query-client.ts

@@ -1,5 +1,6 @@
+import { QueryClient } from '@tanstack/react-query';
+
 import { cache } from 'react';
-import { QueryClient } from 'react-query/core';
 
 const getQueryClient = cache(() => new QueryClient());
 export default getQueryClient;

src/config/queryClient.ts

@@ -1,5 +1,4 @@
 import { DOMAIN, GRAASP_API_HOST } from './env';
-import notifier from './notifier';
 
 // eslint-disable-next-line import/prefer-default-export
 export const QUERY_CLIENT_OPTIONS = {
@@ -11,10 +10,9 @@ export const QUERY_CLIENT_OPTIONS = {
  refetchOnMount: false,
  // avoid refetching when same data are closely fetched
  staleTime: 1000, // ms
- cacheTime: 1000, // ms
+ gcTime: 1000, // ms
  },
  DOMAIN,
- notifier,
  SHOW_NOTIFICATIONS: true,
  WS_HOST: `${GRAASP_API_HOST?.replace('http', 'ws')}/ws`,
 };