Memo-ized GQL useEffects params so they do not continuously make XHR … (

#94) * Memo-ized GQL useEffects params so they do not continuously make XHR to AEM * Simplified empty params * Removed unused useMemo
adobe · Oct 31, 2023 · 258ec3b · 258ec3b
1 parent 6afaab4
commit 258ec3b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/react-app/src/api/usePersistedQueries.js b/react-app/src/api/usePersistedQueries.js
@@ -59,8 +59,7 @@ async function fetchPersistedQuery(persistedQueryName, queryParameters) {
  *
  * @returns an array of Adventure JSON objects, and array of errors
  */
-export function useAdventuresByActivity(adventureActivity, params = {}) {
-
+export function useAdventuresByActivity(adventureActivity, params) {
   const [adventures, setAdventures] = useState(null);
   const [errors, setErrors] = useState(null);
 
@@ -104,7 +103,7 @@ export function useAdventuresByActivity(adventureActivity, params = {}) {
  * @param {String!} slugName the adventure slug
  * @returns a JSON object representing the Adventure
  */
-export function useAdventureBySlug(slugName, params = {}) {
+export function useAdventureBySlug(slugName, params) {
   const [adventure, setAdventure] = useState(null);
   const [references, setReferences] = useState(null);
   const [errors, setErrors] = useState(null);
@@ -146,4 +145,6 @@ export function useAdventureBySlug(slugName, params = {}) {
   }, [slugName, params]);
 
   return { adventure, references, errors };
-}
+}
+
+
diff --git a/react-app/src/components/AdventureDetail.js b/react-app/src/components/AdventureDetail.js
@@ -6,7 +6,7 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
 accordance with the terms of the Adobe license agreement accompanying
 it.
 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link, useParams } from "react-router-dom";
 import { useAdventureBySlug } from "../api/usePersistedQueries";
 import { addAemHost } from "../api/aemHeadlessClient";
@@ -21,9 +21,9 @@ function AdventureDetail() {
 
     // Read the slug value which is the parameter used to query for the adventure's details
     const { slug } = useParams();
-
+    const queryParameters = useMemo(() => ({ format: 'JPG', preferWebp: true, width: 1200}), []);
     // Query AEM for the Adventures's details, using the `slug`
-    const { adventure, references, error } = useAdventureBySlug(slug, { format: 'JPG', preferWebp: true, width: 1200});
+    const { adventure, references, error } = useAdventureBySlug(slug, queryParameters);
 
     // Handle error and loading conditions
     if (error) {

diff --git a/react-app/src/components/Adventures.js b/react-app/src/components/Adventures.js
@@ -6,7 +6,7 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
 accordance with the terms of the Adobe license agreement accompanying
 it.
 */
-import React from "react";
+import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { useAdventuresByActivity } from "../api/usePersistedQueries";
 import { addAemHost } from "../api/aemHeadlessClient";
@@ -15,8 +15,8 @@ import Loading from "./Loading";
 import './Adventures.scss';
 
 function Adventures({ adventureActivity }) {
-    const assetTransform = { format: 'JPG', preferWebp: true, size: { width: 240, height: 200 } };
-    const { adventures, error } = useAdventuresByActivity(adventureActivity, assetTransform);
+    const queryParameters = useMemo(() => ({ format: 'JPG', preferWebp: true, size: { width: 240, height: 200 } }), []);
+    const { adventures, error } = useAdventuresByActivity(adventureActivity, queryParameters);
 
     // Handle error and loading conditions
     if (error) {