[RAV] Remove persisted query link (#1512)

* use batch link for graphql queries

* update changlog

* update changelog, rmeove extra depedencies

CHANGELOG.md

@@ -42,6 +42,7 @@ Our versioning strategy is as follows:
 * `[sitecore-jss]` Handle null items in graphql layout service. ([#1492](https://github.com/Sitecore/jss/pull/1492))
 * `[sitecore-jss]` `[templates/nextjs-personalize]` Introduced optional personalize scope identifier to isolate embedded personalization data among XM Cloud Environments that are sharing a Personalize tenant ([#1494](https://github.com/Sitecore/jss/pull/1494))
 * `[templates/nextjs-personalize]` `[sitecore-jss]` Update the default personalize middleware, personalize/cdp service timeout values to 400 ([#1507](https://github.com/Sitecore/jss/pull/1507))
+* `[templates/react]` `[templates/angular]` `[templates/vue]` Remove persisted query link since APQ(Automatic Persisted Queries) is not supported on Sitecore Experience Edge Delivery ([#1420](https://github.com/Sitecore/jss/pull/1512))
 
 ### 🧹 Chores
 

packages/create-sitecore-jss/src/templates/angular/package.json

@@ -70,7 +70,6 @@
     "core-js": "~3.9.1",
     "graphql": "15.5.0",
     "graphql-tag": "~2.11.0",
-    "js-sha256": "^0.9.0",
     "lodash": "^4.17.21",
     "rxjs": "~6.6.6",
     "tslib": "^2.1.0",

packages/create-sitecore-jss/src/templates/angular/src/app/jss-graphql.module.ts

@@ -3,10 +3,8 @@ import { HttpClientModule, HttpHeaders } from '@angular/common/http';
 import { InMemoryCache, NormalizedCacheObject, PossibleTypesMap } from '@apollo/client/core';
 import { Apollo, ApolloModule } from 'apollo-angular';
 import { HttpBatchLink } from 'apollo-angular/http';
-import { createPersistedQueryLink } from 'apollo-angular/persisted-queries';
 import { isPlatformServer } from '@angular/common';
 import { TransferState, makeStateKey } from '@angular/platform-browser';
-import { sha256 } from 'js-sha256';
 import { environment } from '../environments/environment';
 import { JssGraphQLService } from './jss-graphql.service';
 
@@ -57,7 +55,6 @@ export class GraphQLModule {
       See the apollo-link documentation for more details.
     */
 
-
     // set sc_apikey header which is required for any GraphQL calls
     const sc_apikey = new HttpHeaders().set('sc_apikey', environment.sitecoreApiKey);
 
@@ -68,14 +65,9 @@ export class GraphQLModule {
     // ...or a batched link (multiple queries within 10ms all go in one HTTP request)
     const batchHttp = this.httpLink.create({
       uri: environment.graphQLEndpoint,
-      headers: sc_apikey
+      headers: sc_apikey,
     });
 
-    // ...and an automatic persisted query link, which reduces bandwidth by using query hashes to alias content
-    // the APQ link is _chained_ behind another link that performs the actual HTTP calls, so you can choose
-    // APQ + batched, or APQ + http links for example.
-    const automaticPersistHttp = createPersistedQueryLink({ sha256 }).concat(batchHttp);
-
     const possibleTypes = {} as PossibleTypesMap;
 
     introspectionQueryResultData.__schema.types.forEach((supertype) => {
@@ -87,7 +79,7 @@ export class GraphQLModule {
     });
 
     this.apollo.create({
-      link: automaticPersistHttp,
+      link: batchHttp,
       cache,
       ssrMode: isPlatformServer(this.platformId),
       ssrForceFetchDelay: 100,

packages/create-sitecore-jss/src/templates/react/package.json

@@ -40,7 +40,6 @@
     "graphql": "~16.6.0",
     "graphql-tag": "~2.12.6",
     "i18next": "^22.0.6",
-    "js-sha256": "^0.9.0",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",

packages/create-sitecore-jss/src/templates/react/src/lib/GraphQLClientFactory.js

@@ -2,7 +2,6 @@
 
 import 'cross-fetch/polyfill';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
-import { sha256 } from 'js-sha256';
 
 /* eslint-disable import/order */
 
@@ -28,28 +27,22 @@ import introspectionQueryResultData from '../temp/GraphQLFragmentTypes.json';
 // ...or a batched link (multiple queries within 10ms all go in one HTTP request)
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
 
-// ...and an automatic persisted query link, which reduces bandwidth by using query hashes to alias content
-// the APQ link is _chained_ behind another link that performs the actual HTTP calls, so you can choose
-// APQ + batched, or APQ + http links for example.
-import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
 import config from '../temp/config';
 
-export default function (endpoint, ssr, initialCacheState) {
+export default function(endpoint, ssr, initialCacheState) {
   /* HTTP link selection: default to batched + APQ */
-  const link = createPersistedQueryLink({ sha256 }).concat(
-    new BatchHttpLink({
-      uri: endpoint,
-      headers: {
-        connection: 'keep-alive',
-        sc_apikey: config.sitecoreApiKey,
-      },
-    })
-  );
+  const link = new BatchHttpLink({
+    uri: endpoint,
+    headers: {
+      connection: 'keep-alive',
+      sc_apikey: config.sitecoreApiKey,
+    },
+  });
 
   const possibleTypes = {};
 
-  introspectionQueryResultData.__schema.types.forEach((supertype) => {
-    possibleTypes[supertype.name] = supertype.possibleTypes.map((subtype) => subtype.name);
+  introspectionQueryResultData.__schema.types.forEach(supertype => {
+    possibleTypes[supertype.name] = supertype.possibleTypes.map(subtype => subtype.name);
   });
 
   const cache = new InMemoryCache({

packages/create-sitecore-jss/src/templates/vue/package.json

@@ -58,7 +58,6 @@
     "bootstrap": "^5.2.3",
     "cross-fetch": "~3.1.5",
     "graphql": "^16.6.0",
-    "js-sha256": "^0.9.0",
     "register-service-worker": "~1.7.2",
     "serialize-javascript": "^6.0.1",
     "vue": "^3.2.45",

packages/create-sitecore-jss/src/templates/vue/src/lib/GraphQLClientFactory.js

@@ -1,6 +1,5 @@
 import 'cross-fetch/polyfill'; // Apollo uses `fetch`, which needs a polyfill for node and older browsers.
 import { InMemoryCache, ApolloClient } from '@apollo/client/core';
-import { sha256 } from 'js-sha256';
 
 /*
   INTROSPECTION DATA
@@ -18,27 +17,23 @@ import introspectionQueryResultData from '../temp/GraphQLFragmentTypes.json';
 */
 
 // choose between a basic HTTP link to run queries...
+// import { createHttpLink } from 'apollo-link-http';
+// const link = createHttpLink({ uri: endpoint });
 
 // ...or a batched link (multiple queries within 10ms all go in one HTTP request)
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
 
-// ...and an automatic persisted query link, which reduces bandwidth by using query hashes to alias content
-// the APQ link is _chained_ behind another link that performs the actual HTTP calls, so you can choose
-// APQ + batched, or APQ + http links for example.
-import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
 import config from '../temp/config';
 
-export default function (endpoint, ssr, initialCacheState) {
+export default function(endpoint, ssr, initialCacheState) {
   /* HTTP link selection: default to batched + APQ */
-  const link = createPersistedQueryLink({ sha256 }).concat(
-    new BatchHttpLink({
-      uri: endpoint,
-      headers: {
-        connection: 'keep-alive',
-        sc_apikey: config.sitecoreApiKey,
-      },
-    })
-  );
+  const link = new BatchHttpLink({
+    uri: endpoint,
+    headers: {
+      connection: 'keep-alive',
+      sc_apikey: config.sitecoreApiKey,
+    },
+  });
 
   const possibleTypes = {};