From 26dd43d101ff68d82adc43e72f712461be5c950e Mon Sep 17 00:00:00 2001 From: Thibault Reidy Date: Thu, 3 Oct 2024 15:35:02 +0200 Subject: [PATCH 1/4] feat: use prefetch in the home page - feat(deps): update the QueryClient dev deps to tanstack v5 (was v3) --- app/all-collections/page.tsx | 3 +- app/collections/[id]/page.tsx | 12 +- app/liked/page.tsx | 2 +- app/members/[id]/page.tsx | 2 +- app/oer/page.tsx | 3 +- app/page.tsx | 22 +++- app/providers.tsx | 7 +- package.json | 4 +- src/components/HydrateClient.tsx | 7 +- src/components/QueryClientContext.tsx | 3 +- src/components/common/Wrapper.tsx | 2 +- src/config/get-query-client.ts | 3 +- yarn.lock | 170 +++++--------------------- 13 files changed, 71 insertions(+), 169 deletions(-) diff --git a/app/all-collections/page.tsx b/app/all-collections/page.tsx index ce64c785..6211847c 100644 --- a/app/all-collections/page.tsx +++ b/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'; diff --git a/app/collections/[id]/page.tsx b/app/collections/[id]/page.tsx index 857c7183..649e8a2d 100644 --- a/app/collections/[id]/page.tsx +++ b/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'; diff --git a/app/liked/page.tsx b/app/liked/page.tsx index e192b053..fb0e4bbb 100644 --- a/app/liked/page.tsx +++ b/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'; diff --git a/app/members/[id]/page.tsx b/app/members/[id]/page.tsx index 8399d352..15a9abab 100644 --- a/app/members/[id]/page.tsx +++ b/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'; diff --git a/app/oer/page.tsx b/app/oer/page.tsx index 84535b99..220299cf 100644 --- a/app/oer/page.tsx +++ b/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'; diff --git a/app/page.tsx b/app/page.tsx index 23e92224..fb2bc990 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,10 +1,13 @@ +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 { GRAASPER_ID } from '../src/config/env'; import getQueryClient from '../src/config/get-query-client'; import LIBRARY from '../src/langs/constants'; import en from '../src/langs/en.json'; @@ -32,6 +35,23 @@ const Page = async () => { // await queryClient.prefetchQuery(['items', 'collections', 'all'], () => // Api.getAllPublishedItems({}, { API_HOST: GRAASP_API_HOST, axios }), // ); + + const { hooks } = configureQueryClient({}); + + await queryClient.prefetchQuery( + hooks.publishedItemsForMemberOptions(GRAASPER_ID), + ); + await queryClient.prefetchQuery( + hooks.mostLikedPublishedItemsOptions({ + limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, + }), + ); + await queryClient.prefetchQuery( + hooks.mostRecentPublishedItemsOptions({ + limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, + }), + ); + const dehydratedState = dehydrate(queryClient); return ( diff --git a/app/providers.tsx b/app/providers.tsx index 3b8833fc..4cecd0cc 100644 --- a/app/providers.tsx +++ b/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 ( {children} - {/* */} ); diff --git a/package.json b/package.json index 87c3c539..3affa395 100644 --- a/package.json +++ b/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", @@ -75,6 +75,7 @@ "@commitlint/cli": "19.4.0", "@commitlint/config-conventional": "19.2.2", "@cypress/code-coverage": "3.12.44", + "@tanstack/react-query": "5.59.0", "@types/katex": "^0.16.7", "@types/lodash.groupby": "4.6.9", "@types/lodash.truncate": "4.4.9", @@ -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" diff --git a/src/components/HydrateClient.tsx b/src/components/HydrateClient.tsx index d746531d..43b07b83 100644 --- a/src/components/HydrateClient.tsx +++ b/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 ; }; diff --git a/src/components/QueryClientContext.tsx b/src/components/QueryClientContext.tsx index fed5d8b2..8b4009d6 100644 --- a/src/components/QueryClientContext.tsx +++ b/src/components/QueryClientContext.tsx @@ -1,5 +1,6 @@ +import type { DehydratedState } from '@tanstack/react-query'; + import React from 'react'; -import type { DehydratedState } from 'react-query'; import { configureQueryClient } from '@graasp/query-client'; diff --git a/src/components/common/Wrapper.tsx b/src/components/common/Wrapper.tsx index 877e0435..3952d14f 100644 --- a/src/components/common/Wrapper.tsx +++ b/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'; diff --git a/src/config/get-query-client.ts b/src/config/get-query-client.ts index 41c9b30e..6ffab806 100644 --- a/src/config/get-query-client.ts +++ b/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; diff --git a/yarn.lock b/yarn.lock index 2129495a..bb0c9b4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -552,15 +552,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2": - version: 7.24.0 - resolution: "@babel/runtime@npm:7.24.0" - dependencies: - regenerator-runtime: "npm:^0.14.0" - checksum: 10/8d32c7e116606ea322b89f9fde8ffae6be9503b549dc0d0abb38bd9dc26e87469b9fb7a66964cc089ee558fd0a97d304fb0a3cfec140694764fb0d71b6a6f5e4 - languageName: node - linkType: hard - "@babel/template@npm:^7.22.15": version: 7.22.15 resolution: "@babel/template@npm:7.22.15" @@ -1273,19 +1264,19 @@ __metadata: languageName: node linkType: hard -"@graasp/query-client@npm:3.26.0": +"@graasp/query-client@github:graasp/graasp-query-client#947-prefetch-home-page": version: 3.26.0 - resolution: "@graasp/query-client@npm:3.26.0" + resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=482aaae24f47e13cce405cc732b0fa94ae57c804" dependencies: - "@tanstack/react-query": "npm:5.52.0" - "@tanstack/react-query-devtools": "npm:5.52.0" + "@tanstack/react-query": "npm:5.59.0" + "@tanstack/react-query-devtools": "npm:5.59.0" axios: "npm:1.7.7" http-status-codes: "npm:2.3.0" peerDependencies: "@graasp/sdk": ^4.0.0 "@graasp/translations": "*" react: ^18.0.0 - checksum: 10/80e18fdfaa2ac9e34d3c3893d0fb476c6a05004c5b0ee3a4a0dbdfb5736a1aa3a4213ca7a4c50a372faf514c0331a62196c421be21aabdb5061e4d21bc2058a4 + checksum: 10/de5d303e65acb4f2ec85311c46e959d948935b87d9497f9b1312fa2cb7c8e84abe13fe35170fbe5f5dbb237ad005ae8ed3e01dd9eb55ca17bd6bad1a4efacc4b languageName: node linkType: hard @@ -2754,40 +2745,40 @@ __metadata: languageName: node linkType: hard -"@tanstack/query-core@npm:5.52.0": - version: 5.52.0 - resolution: "@tanstack/query-core@npm:5.52.0" - checksum: 10/cd21e87ad7a0bbb262dea21704352eb1bbaafc26776ae1602b4be9a2d0d1f16a89cc4b5951f69083e26f970d75386431240d5a573ed9bce5a37ba2dc862e376a +"@tanstack/query-core@npm:5.59.0": + version: 5.59.0 + resolution: "@tanstack/query-core@npm:5.59.0" + checksum: 10/2e8fd7d9bdd62cabc1a2b20b2cf0c9275174ee5550170f224bd4e30fe2d01cc8d39a0dd03caae55ddb8aea259d991966bb54b581b4046fd67c621c081f4b0ba7 languageName: node linkType: hard -"@tanstack/query-devtools@npm:5.51.16": - version: 5.51.16 - resolution: "@tanstack/query-devtools@npm:5.51.16" - checksum: 10/b0e8c1f86890a515d4ddbab4743387aecd882271f7be2cbc36f69d05ba42b803ae2e9bbfd53a03450ca4827c94f6b5d7d6fa5e013bfabe6ee0aa9a7b34a223d3 +"@tanstack/query-devtools@npm:5.58.0": + version: 5.58.0 + resolution: "@tanstack/query-devtools@npm:5.58.0" + checksum: 10/ca16c47c943ea392dfddc301f7e09ecdb0c8b905fb684b8f26b908a244e2e897679efb0ead5fa8e728711017341fdd91d8c51ebb19f746819e26ade5549f539e languageName: node linkType: hard -"@tanstack/react-query-devtools@npm:5.52.0": - version: 5.52.0 - resolution: "@tanstack/react-query-devtools@npm:5.52.0" +"@tanstack/react-query-devtools@npm:5.59.0": + version: 5.59.0 + resolution: "@tanstack/react-query-devtools@npm:5.59.0" dependencies: - "@tanstack/query-devtools": "npm:5.51.16" + "@tanstack/query-devtools": "npm:5.58.0" peerDependencies: - "@tanstack/react-query": ^5.52.0 + "@tanstack/react-query": ^5.59.0 react: ^18 || ^19 - checksum: 10/67fff9fe45a54e6823800bd15de5d5712b65bda9bb567907765481025775817b03c56925add47dd51fe19de1135b57b290570e5cb00b5a071ca3f7d409c39805 + checksum: 10/a4deb3fe97355fcb98febd3b9cd5e871f3756771eb9eb15a2a226a0a9fb0314502522f70d12f54c25aec7985eae77b82b39bce37f86ee0312da046f4f1822bcf languageName: node linkType: hard -"@tanstack/react-query@npm:5.52.0": - version: 5.52.0 - resolution: "@tanstack/react-query@npm:5.52.0" +"@tanstack/react-query@npm:5.59.0": + version: 5.59.0 + resolution: "@tanstack/react-query@npm:5.59.0" dependencies: - "@tanstack/query-core": "npm:5.52.0" + "@tanstack/query-core": "npm:5.59.0" peerDependencies: - react: ^18.0.0 - checksum: 10/6976d309d306f0dd70f25e0de820812c47bfc39b654294e1512d4bb5320d0abad1bc3d6de16a25b7ae6766eb9b928c5e396e996d7d6689d33a1c1436de68cf7b + react: ^18 || ^19 + checksum: 10/48963e7d0603958390db0087c018b71e87187ad84dea03279716b4869de83509027c37f65f3c6c4a1cd7b6f9f14250afffc2aeee5d481528e2308d937422ae41 languageName: node linkType: hard @@ -4051,13 +4042,6 @@ __metadata: languageName: node linkType: hard -"big-integer@npm:^1.6.16": - version: 1.6.51 - resolution: "big-integer@npm:1.6.51" - checksum: 10/c7a12640901906d6f6b6bdb42a4eaba9578397b6d9a0dd090cf001ec813ff2bfcd441e364068ea0416db6175d2615f8ed19cff7d1a795115bf7c92d44993f991 - languageName: node - linkType: hard - "binary-extensions@npm:^2.0.0": version: 2.2.0 resolution: "binary-extensions@npm:2.2.0" @@ -4114,22 +4098,6 @@ __metadata: languageName: node linkType: hard -"broadcast-channel@npm:^3.4.1": - version: 3.7.0 - resolution: "broadcast-channel@npm:3.7.0" - dependencies: - "@babel/runtime": "npm:^7.7.2" - detect-node: "npm:^2.1.0" - js-sha3: "npm:0.8.0" - microseconds: "npm:0.2.0" - nano-time: "npm:1.0.0" - oblivious-set: "npm:1.0.0" - rimraf: "npm:3.0.2" - unload: "npm:2.2.0" - checksum: 10/ccf6be63c5ed03965f00c28f2cc55028ca3d6eb6f47cb430cc7a5e1ed404c54601c32bc87db24d11f229c80201fd2e606f5c9683543875a7e26ca06e23079782 - languageName: node - linkType: hard - "browserslist@npm:^4.21.9": version: 4.22.1 resolution: "browserslist@npm:4.22.1" @@ -5372,13 +5340,6 @@ __metadata: languageName: node linkType: hard -"detect-node@npm:^2.0.4, detect-node@npm:^2.1.0": - version: 2.1.0 - resolution: "detect-node@npm:2.1.0" - checksum: 10/832184ec458353e41533ac9c622f16c19f7c02d8b10c303dfd3a756f56be93e903616c0bb2d4226183c9351c15fc0b3dba41a17a2308262afabcfa3776e6ae6e - languageName: node - linkType: hard - "dir-glob@npm:^3.0.1": version: 3.0.1 resolution: "dir-glob@npm:3.0.1" @@ -7277,7 +7238,7 @@ __metadata: "@emotion/react": "npm:11.13.0" "@emotion/server": "npm:11.11.0" "@emotion/styled": "npm:11.13.0" - "@graasp/query-client": "npm:3.26.0" + "@graasp/query-client": "github:graasp/graasp-query-client#947-prefetch-home-page" "@graasp/sdk": "npm:4.31.0" "@graasp/stylis-plugin-rtl": "npm:2.2.0" "@graasp/translations": "npm:1.35.0" @@ -7286,6 +7247,7 @@ __metadata: "@mui/lab": "npm:5.0.0-alpha.170" "@mui/material": "npm:5.16.5" "@sentry/nextjs": "npm:8.26.0" + "@tanstack/react-query": "npm:5.59.0" "@testing-library/jest-dom": "npm:6.4.8" "@testing-library/react": "npm:16.0.0" "@testing-library/user-event": "npm:14.5.2" @@ -7333,7 +7295,6 @@ __metadata: react-ga4: "npm:2.1.0" react-helmet: "npm:6.1.0" react-i18next: "npm:15.0.0" - react-query: "npm:3.39.3" react-quill: "npm:2.0.0" react-router-dom: "npm:6.26.1" react-toastify: "npm:10.0.5" @@ -8432,13 +8393,6 @@ __metadata: languageName: node linkType: hard -"js-sha3@npm:0.8.0": - version: 0.8.0 - resolution: "js-sha3@npm:0.8.0" - checksum: 10/a49ac6d3a6bfd7091472a28ab82a94c7fb8544cc584ee1906486536ba1cb4073a166f8c7bb2b0565eade23c5b3a7b8f7816231e0309ab5c549b737632377a20c - languageName: node - linkType: hard - "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0": version: 4.0.0 resolution: "js-tokens@npm:4.0.0" @@ -9034,16 +8988,6 @@ __metadata: languageName: node linkType: hard -"match-sorter@npm:^6.0.2": - version: 6.3.1 - resolution: "match-sorter@npm:6.3.1" - dependencies: - "@babel/runtime": "npm:^7.12.5" - remove-accents: "npm:0.4.2" - checksum: 10/917dd07c2562b345919156ef601dfbeaa44571e111e2956f876be8de6800325be97f878677199c50298672fbd3cfd17b2c4918d3fba15f0e9a5b32f328780fdc - languageName: node - linkType: hard - "meow@npm:^12.0.1": version: 12.1.1 resolution: "meow@npm:12.1.1" @@ -9094,13 +9038,6 @@ __metadata: languageName: node linkType: hard -"microseconds@npm:0.2.0": - version: 0.2.0 - resolution: "microseconds@npm:0.2.0" - checksum: 10/22bfa8553f92c7d95afff6de0aeb2aecf750680d41b8c72b02098ccc5bbbb0a384380ff539292dbd3788f5dfc298682f9d38a2b4c101f5ee2c9471d53934c5fa - languageName: node - linkType: hard - "mime-db@npm:1.52.0": version: 1.52.0 resolution: "mime-db@npm:1.52.0" @@ -9337,15 +9274,6 @@ __metadata: languageName: node linkType: hard -"nano-time@npm:1.0.0": - version: 1.0.0 - resolution: "nano-time@npm:1.0.0" - dependencies: - big-integer: "npm:^1.6.16" - checksum: 10/eef8548546cc1020625f8e44751a7263e9eddf0412a6a1a6c80a8d2be2ea7973622804a977cdfe796807b85b20ff6c8ba340e8dd20effcc7078193ed5edbb5d4 - languageName: node - linkType: hard - "nanoid@npm:^3.3.6": version: 3.3.6 resolution: "nanoid@npm:3.3.6" @@ -9789,13 +9717,6 @@ __metadata: languageName: node linkType: hard -"oblivious-set@npm:1.0.0": - version: 1.0.0 - resolution: "oblivious-set@npm:1.0.0" - checksum: 10/f31740ea9c3a8242ad2324e4ebb9a35359fbc2e6e7131731a0fc1c8b7b1238eb07e4c8c631a38535243a7b8e3042b7e89f7dc2a95d2989afd6f80bd5793b0aab - languageName: node - linkType: hard - "obuf@npm:~1.1.2": version: 1.1.2 resolution: "obuf@npm:1.1.2" @@ -10640,24 +10561,6 @@ __metadata: languageName: node linkType: hard -"react-query@npm:3.39.3": - version: 3.39.3 - resolution: "react-query@npm:3.39.3" - dependencies: - "@babel/runtime": "npm:^7.5.5" - broadcast-channel: "npm:^3.4.1" - match-sorter: "npm:^6.0.2" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true - checksum: 10/17dc4eb75d2ebc262b685096dfaa203202a883ac43768d0faf80f3ad4bdf791dff0691569d6e8ec2ac81b9377c5477e0a1ebea9f51bae1482ca154f5dde50d2d - languageName: node - linkType: hard - "react-quill@npm:2.0.0": version: 2.0.0 resolution: "react-quill@npm:2.0.0" @@ -10925,13 +10828,6 @@ __metadata: languageName: node linkType: hard -"remove-accents@npm:0.4.2": - version: 0.4.2 - resolution: "remove-accents@npm:0.4.2" - checksum: 10/25d5c84f1355be60b42f8ad8a1ba29c2413dead138a9e2a88633e4fc94a1b953afe306dd27479125aef231d267482c54d292e558b04ec100fb9adf063ccbf75a - languageName: node - linkType: hard - "request-progress@npm:^3.0.0": version: 3.0.0 resolution: "request-progress@npm:3.0.0" @@ -11084,7 +10980,7 @@ __metadata: languageName: node linkType: hard -"rimraf@npm:3.0.2, rimraf@npm:^3.0.0, rimraf@npm:^3.0.2": +"rimraf@npm:^3.0.0, rimraf@npm:^3.0.2": version: 3.0.2 resolution: "rimraf@npm:3.0.2" dependencies: @@ -12474,16 +12370,6 @@ __metadata: languageName: node linkType: hard -"unload@npm:2.2.0": - version: 2.2.0 - resolution: "unload@npm:2.2.0" - dependencies: - "@babel/runtime": "npm:^7.6.2" - detect-node: "npm:^2.0.4" - checksum: 10/382f676f24b774dc84beaf424326a227929ecad0ea0f319d4fd0812376b3306ea6d7ccf7ea85c6663ed7be552e9e004f429146bad8faf976b43084e29e265d10 - languageName: node - linkType: hard - "unplugin@npm:1.0.1": version: 1.0.1 resolution: "unplugin@npm:1.0.1" From 109dd6c669cb1d28e8a6869b9f1b6342397de15e Mon Sep 17 00:00:00 2001 From: Thibault Reidy Date: Fri, 4 Oct 2024 16:41:00 +0200 Subject: [PATCH 2/4] feat: continue with prefetch (not working) --- app/page.tsx | 39 +++++++++++++++++++---------------- package.json | 2 +- src/components/pages/Home.tsx | 21 ++++++++++++------- src/config/queryClient.ts | 2 +- 4 files changed, 37 insertions(+), 27 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index fb2bc990..cad61fa7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,7 +7,7 @@ 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 { GRAASPER_ID } from '../src/config/env'; +import { GRAASPER_ID, GRAASP_API_HOST } from '../src/config/env'; import getQueryClient from '../src/config/get-query-client'; import LIBRARY from '../src/langs/constants'; import en from '../src/langs/en.json'; @@ -31,26 +31,29 @@ export async function generateMetadata(): Promise { } const Page = async () => { + const { hooks } = configureQueryClient({ + API_HOST: GRAASP_API_HOST, + }); const queryClient = getQueryClient(); - // await queryClient.prefetchQuery(['items', 'collections', 'all'], () => - // Api.getAllPublishedItems({}, { API_HOST: GRAASP_API_HOST, axios }), - // ); - const { hooks } = configureQueryClient({}); + await Promise.all([ + queryClient.prefetchQuery( + hooks.publishedItemsForMemberOptions(GRAASPER_ID), + ), - await queryClient.prefetchQuery( - hooks.publishedItemsForMemberOptions(GRAASPER_ID), - ); - await queryClient.prefetchQuery( - hooks.mostLikedPublishedItemsOptions({ - limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, - }), - ); - await queryClient.prefetchQuery( - hooks.mostRecentPublishedItemsOptions({ - limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, - }), - ); + queryClient.prefetchQuery( + hooks.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( + // hooks.mostRecentPublishedItemsOptions({ + // limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, + // }), + // ), + ]); const dehydratedState = dehydrate(queryClient); diff --git a/package.json b/package.json index 3affa395..62f54e01 100644 --- a/package.json +++ b/package.json @@ -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", @@ -75,7 +76,6 @@ "@commitlint/cli": "19.4.0", "@commitlint/config-conventional": "19.2.2", "@cypress/code-coverage": "3.12.44", - "@tanstack/react-query": "5.59.0", "@types/katex": "^0.16.7", "@types/lodash.groupby": "4.6.9", "@types/lodash.truncate": "4.4.9", diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index 47a9693f..e12f0ff4 100644 --- a/src/components/pages/Home.tsx +++ b/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'; @@ -27,17 +29,22 @@ const Home = () => { const { hooks } = useContext(QueryClientContext); const { data: graasperCollections, isLoading: isGraasperCollectionsLoading } = - hooks.usePublishedItemsForMember(GRAASPER_ID); + useQuery(hooks.publishedItemsForMemberOptions(GRAASPER_ID)); + const { data: mostLikedCollections, isLoading: isMostLikedCollectionsLoading, - } = hooks.useMostLikedPublishedItems({ - limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, - }); - const { data: recentCollections, isLoading: isMostRecentLoading } = - hooks.useMostRecentPublishedItems({ + } = useQuery( + hooks.mostLikedPublishedItemsOptions({ + limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, + }), + ); + + const { data: recentCollections, isLoading: isMostRecentLoading } = useQuery( + hooks.mostRecentPublishedItemsOptions({ limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, - }); + }), + ); return ( diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts index 3ae669f4..6c8a8360 100644 --- a/src/config/queryClient.ts +++ b/src/config/queryClient.ts @@ -11,7 +11,7 @@ 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, From c80535c27ffa7d831698c41fddc1e6720d9f0018 Mon Sep 17 00:00:00 2001 From: Thibault Reidy Date: Mon, 7 Oct 2024 15:56:46 +0200 Subject: [PATCH 3/4] feat: preftech works without default query options --- app/page.tsx | 17 ++++++++--------- src/components/pages/Home.tsx | 8 ++++---- yarn.lock | 4 ++-- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index cad61fa7..fc247bc5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,11 +3,11 @@ import { Metadata } from 'next'; import { configureQueryClient } from '@graasp/query-client'; +// import { QueryOptions } 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 { GRAASPER_ID, GRAASP_API_HOST } from '../src/config/env'; import getQueryClient from '../src/config/get-query-client'; import LIBRARY from '../src/langs/constants'; import en from '../src/langs/en.json'; @@ -31,25 +31,24 @@ export async function generateMetadata(): Promise { } const Page = async () => { - const { hooks } = configureQueryClient({ - API_HOST: GRAASP_API_HOST, - }); + const { queryOptions } = configureQueryClient({}); const queryClient = getQueryClient(); await Promise.all([ - queryClient.prefetchQuery( - hooks.publishedItemsForMemberOptions(GRAASPER_ID), - ), + // TODO: uncomment when prefetch works correctly. + // queryClient.prefetchQuery( + // queryOptions.publishedItemsForMemberOptions(GRAASPER_ID), + // ), queryClient.prefetchQuery( - hooks.mostLikedPublishedItemsOptions({ + 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( - // hooks.mostRecentPublishedItemsOptions({ + // queryOptions.mostRecentPublishedItemsOptions({ // limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, // }), // ), diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index e12f0ff4..69744252 100644 --- a/src/components/pages/Home.tsx +++ b/src/components/pages/Home.tsx @@ -26,22 +26,22 @@ import StyledBackgroundContainer from '../layout/StyledBackgroundContainer'; const Home = () => { const { t } = useLibraryTranslation(); - const { hooks } = useContext(QueryClientContext); + const { queryOptions } = useContext(QueryClientContext); const { data: graasperCollections, isLoading: isGraasperCollectionsLoading } = - useQuery(hooks.publishedItemsForMemberOptions(GRAASPER_ID)); + useQuery(queryOptions.publishedItemsForMemberOptions(GRAASPER_ID)); const { data: mostLikedCollections, isLoading: isMostLikedCollectionsLoading, } = useQuery( - hooks.mostLikedPublishedItemsOptions({ + queryOptions.mostLikedPublishedItemsOptions({ limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, }), ); const { data: recentCollections, isLoading: isMostRecentLoading } = useQuery( - hooks.mostRecentPublishedItemsOptions({ + queryOptions.mostRecentPublishedItemsOptions({ limit: HOMEPAGE_NB_ELEMENTS_TO_SHOW, }), ); diff --git a/yarn.lock b/yarn.lock index bb0c9b4b..184e3362 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1266,7 +1266,7 @@ __metadata: "@graasp/query-client@github:graasp/graasp-query-client#947-prefetch-home-page": version: 3.26.0 - resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=482aaae24f47e13cce405cc732b0fa94ae57c804" + resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=4d5b8f8335955b376b6da5da265b6860bd8a1033" dependencies: "@tanstack/react-query": "npm:5.59.0" "@tanstack/react-query-devtools": "npm:5.59.0" @@ -1276,7 +1276,7 @@ __metadata: "@graasp/sdk": ^4.0.0 "@graasp/translations": "*" react: ^18.0.0 - checksum: 10/de5d303e65acb4f2ec85311c46e959d948935b87d9497f9b1312fa2cb7c8e84abe13fe35170fbe5f5dbb237ad005ae8ed3e01dd9eb55ca17bd6bad1a4efacc4b + checksum: 10/1f88ab97b3327c51ed7f99c0b5d76d3af54519835739cba7aaf7d2e30b57ab172d7696d8324442e50872b03a54d153a5325f03e175f2f4a5d7b8c4a9de09f629 languageName: node linkType: hard From 9540792bda41ba9c7926456db63b98dc733672a7 Mon Sep 17 00:00:00 2001 From: Thibault Reidy Date: Tue, 8 Oct 2024 11:12:37 +0200 Subject: [PATCH 4/4] feat: use default query options --- app/page.tsx | 6 ++---- src/components/QueryClientContext.tsx | 3 ++- src/config/queryClient.ts | 2 -- yarn.lock | 4 ++-- 4 files changed, 6 insertions(+), 9 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index fc247bc5..91d832a7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,12 +3,12 @@ import { Metadata } from 'next'; import { configureQueryClient } from '@graasp/query-client'; -// import { QueryOptions } 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'; @@ -31,7 +31,7 @@ export async function generateMetadata(): Promise { } const Page = async () => { - const { queryOptions } = configureQueryClient({}); + const { queryOptions } = configureQueryClient(QUERY_CLIENT_OPTIONS); const queryClient = getQueryClient(); await Promise.all([ @@ -39,13 +39,11 @@ const Page = async () => { // 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({ diff --git a/src/components/QueryClientContext.tsx b/src/components/QueryClientContext.tsx index 8b4009d6..85ae15e9 100644 --- a/src/components/QueryClientContext.tsx +++ b/src/components/QueryClientContext.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { configureQueryClient } from '@graasp/query-client'; +import notifier from '../config/notifier'; import { QUERY_CLIENT_OPTIONS } from '../config/queryClient'; const QueryClientContext = React.createContext( @@ -15,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, diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts index 6c8a8360..a582a5e7 100644 --- a/src/config/queryClient.ts +++ b/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 = { @@ -14,7 +13,6 @@ export const QUERY_CLIENT_OPTIONS = { gcTime: 1000, // ms }, DOMAIN, - notifier, SHOW_NOTIFICATIONS: true, WS_HOST: `${GRAASP_API_HOST?.replace('http', 'ws')}/ws`, }; diff --git a/yarn.lock b/yarn.lock index 184e3362..fc0187ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1266,7 +1266,7 @@ __metadata: "@graasp/query-client@github:graasp/graasp-query-client#947-prefetch-home-page": version: 3.26.0 - resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=4d5b8f8335955b376b6da5da265b6860bd8a1033" + resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=a5d7e4af5df30996943d9027f48e2917d5937994" dependencies: "@tanstack/react-query": "npm:5.59.0" "@tanstack/react-query-devtools": "npm:5.59.0" @@ -1276,7 +1276,7 @@ __metadata: "@graasp/sdk": ^4.0.0 "@graasp/translations": "*" react: ^18.0.0 - checksum: 10/1f88ab97b3327c51ed7f99c0b5d76d3af54519835739cba7aaf7d2e30b57ab172d7696d8324442e50872b03a54d153a5325f03e175f2f4a5d7b8c4a9de09f629 + checksum: 10/c1def7d682cff83a49c343370488d0d7dba4e4e159977a748f38f24488a1d086ab82e27fe7e9f5a8643ced15b010206729e12f5b9f91f634eb824ab0959909f9 languageName: node linkType: hard