Parameterized graphql endpoint and caching

react-app/.env.development

@@ -3,6 +3,13 @@
 # Server namespace
 REACT_APP_HOST_URI=https://publish-p123-e456.adobeaemcloud.com/
 
+# Graphql endpoint namespace
+REACT_APP_GRAPHQL_ENDPOINT=wknd-shared
+
+# The ability to disable CACHING is ONLY for demo purposes. You should NEVER disable caching in production. Setting this to true will add cache-busting parameters to the AEM Headless API request.
+# Production-use CACHE and TTL can be configured as PersistedQuery header in AEM
+DISABLE_CACHE=false
+
 # Dev modes, use proxy during development (helps avoids potential CORS issues)
 REACT_APP_USE_PROXY=true
 

react-app/src/api/aemHeadlessClient.js

@@ -13,7 +13,6 @@ import AEMHeadless from "@adobe/aem-headless-client-js";
 // environment variable for configuring the headless client
 const {
   REACT_APP_HOST_URI,
-  REACT_APP_GRAPHQL_ENDPOINT,
   REACT_APP_USE_PROXY,
   REACT_APP_AUTH_METHOD,
   REACT_APP_DEV_TOKEN,
@@ -42,7 +41,6 @@ const setAuthorization = () => {
 // Initialize the AEM Headless Client and export it for other files to use
 const aemHeadlessClient = new AEMHeadless({
   serviceURL: serviceURL,
-  endpoint: REACT_APP_GRAPHQL_ENDPOINT,
   auth: setAuthorization(),
 });
 

react-app/src/api/usePersistedQueries.js

@@ -10,6 +10,9 @@ it.
 import { useEffect, useState } from "react";
 import aemHeadlessClient from "./aemHeadlessClient";
 
+// environment variable for configuring the headless client
+const { DISABLE_CACHE, REACT_APP_GRAPHQL_ENDPOINT} = process.env;
+
 /**
  * This file contains the React useEffect custom hooks that:
  * 1. Are called by the React components
@@ -32,6 +35,14 @@ async function fetchPersistedQuery(persistedQueryName, queryParameters) {
   let data;
   let err;
 
+  // Do NOT disable cache in production. This toggle is this demo app is only to help you quickly explore AEM's Headless APIs without having to wait for cache expiration to see changes.
+  if (DISABLE_CACHE === "true") {
+    if (queryParameters === "undefined") {
+      queryParameters = {};
+    }
+    queryParameters.timestamp = new Date().getTime();
+  }
+
   try {
     // AEM GraphQL queries are asynchronous, either await their return or use Promise-based .then(..) { ... } syntax
     const response = await aemHeadlessClient.runPersistedQuery(
@@ -55,7 +66,7 @@ async function fetchPersistedQuery(persistedQueryName, queryParameters) {
 /**
  * React custom hook that returns a list of adventures by activity. If no activity is provided, all adventures are returned.
  * 
- * Custom hook that calls the 'wknd-shared/adventures-all' or 'wknd-shared/adventures-by-activity' persisted query.
+ * Custom hook that calls the '[graphql endpoint namespace]/adventures-all' or '[graphql endpoint namespace]/adventures-by-activity' persisted query.
  *
  * @returns an array of Adventure JSON objects, and array of errors
  */
@@ -70,16 +81,16 @@ export function useAdventuresByActivity(adventureActivity, params) {
       let queryVariables = params;
       let response;
 
-      // if an activity is set (i.e "Camping", "Hiking"...) call wknd-shared/adventures-by-activity query
+      // if an activity is set (i.e "Camping", "Hiking"...) call [graphql endpoint namespace]/adventures-by-activity query
       if (adventureActivity) {
         // The key is 'activity' as defined in the persisted query
         queryVariables = { ...queryVariables, activity: adventureActivity };
 
-        // Call the AEM GraphQL persisted query named "wknd-shared/adventures-by-activity" with parameters
-        response = await fetchPersistedQuery("wknd-shared/adventures-by-activity", queryVariables);
+        // Call the AEM GraphQL persisted query named "[graphql endpoint namespace]/adventures-by-activity" with parameters
+        response = await fetchPersistedQuery(REACT_APP_GRAPHQL_ENDPOINT + "/adventures-by-activity", queryVariables);
       } else {
-        // Call the AEM GraphQL persisted query named "wknd-shared/adventures-all"
-        response = await fetchPersistedQuery("wknd-shared/adventures-all", queryVariables);
+        // Call the AEM GraphQL persisted query named "[graphql endpoint namespace]/adventures-all"
+        response = await fetchPersistedQuery(REACT_APP_GRAPHQL_ENDPOINT + "/adventures-all", queryVariables);
       }
 
       // Sets the adventures variable to the list of adventure JSON objects
@@ -98,7 +109,7 @@ export function useAdventuresByActivity(adventureActivity, params) {
 }
 
 /**
- * Calls the 'wknd-shared/adventure-by-slug' persisted query with `slug` parameter.
+ * Calls the '[graphql endpoint namespace]/adventure-by-slug' persisted query with `slug` parameter.
  *
  * @param {String!} slugName the adventure slug
  * @returns a JSON object representing the Adventure
@@ -119,9 +130,9 @@ export function useAdventureBySlug(slugName, params) {
         slug: slugName,
       };
 
-      // Call the AEM GraphQL persisted query named "wknd-shared/adventure-by-slug" with parameters
+      // Call the AEM GraphQL persisted query named "[graphql endpoint namespace]/adventure-by-slug" with parameters
       response = await fetchPersistedQuery(
-        "wknd-shared/adventure-by-slug",
+        REACT_APP_GRAPHQL_ENDPOINT + "/adventure-by-slug",
         queryVariables
       );