From 5633d1ccf4d3dd231b1b49b3a54fe49ea6dd0dbb Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 6 Jun 2023 12:32:34 -0400 Subject: [PATCH 1/3] use batch link for graphql queries --- .../angular/src/app/jss-graphql.module.ts | 12 ++------- .../react/src/lib/GraphQLClientFactory.js | 27 +++++++------------ .../vue/src/lib/GraphQLClientFactory.js | 25 +++++++---------- 3 files changed, 22 insertions(+), 42 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/jss-graphql.module.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/jss-graphql.module.ts index df411158dd..a13309b8d9 100644 --- a/packages/create-sitecore-jss/src/templates/angular/src/app/jss-graphql.module.ts +++ b/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, diff --git a/packages/create-sitecore-jss/src/templates/react/src/lib/GraphQLClientFactory.js b/packages/create-sitecore-jss/src/templates/react/src/lib/GraphQLClientFactory.js index b6a19270d1..961fcbe3d6 100644 --- a/packages/create-sitecore-jss/src/templates/react/src/lib/GraphQLClientFactory.js +++ b/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({ diff --git a/packages/create-sitecore-jss/src/templates/vue/src/lib/GraphQLClientFactory.js b/packages/create-sitecore-jss/src/templates/vue/src/lib/GraphQLClientFactory.js index b2ee75e824..586883bc3f 100644 --- a/packages/create-sitecore-jss/src/templates/vue/src/lib/GraphQLClientFactory.js +++ b/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 = {}; From 04136224ca4a6d7e7b64202f2274abb9841f3d67 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 6 Jun 2023 13:04:04 -0400 Subject: [PATCH 2/3] update changlog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ad511c423..c2c0508fda 100644 --- a/CHANGELOG.md +++ b/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]` Switch to use http batch link for graphql queries ([#1420](https://github.com/Sitecore/jss/pull/1512)) ### 🧹 Chores From 469af274df03e41839c27ba6d237c32932b15831 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 6 Jun 2023 14:24:13 -0400 Subject: [PATCH 3/3] update changelog, rmeove extra depedencies --- CHANGELOG.md | 2 +- packages/create-sitecore-jss/src/templates/angular/package.json | 1 - packages/create-sitecore-jss/src/templates/react/package.json | 1 - packages/create-sitecore-jss/src/templates/vue/package.json | 1 - 4 files changed, 1 insertion(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c2c0508fda..9f53c9186e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,7 +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]` Switch to use http batch link for graphql queries ([#1420](https://github.com/Sitecore/jss/pull/1512)) +* `[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 diff --git a/packages/create-sitecore-jss/src/templates/angular/package.json b/packages/create-sitecore-jss/src/templates/angular/package.json index 76d2518087..e05441e37d 100644 --- a/packages/create-sitecore-jss/src/templates/angular/package.json +++ b/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", diff --git a/packages/create-sitecore-jss/src/templates/react/package.json b/packages/create-sitecore-jss/src/templates/react/package.json index 82d39116ee..4895fc91ce 100644 --- a/packages/create-sitecore-jss/src/templates/react/package.json +++ b/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", diff --git a/packages/create-sitecore-jss/src/templates/vue/package.json b/packages/create-sitecore-jss/src/templates/vue/package.json index a9ec784344..b686aea7c6 100644 --- a/packages/create-sitecore-jss/src/templates/vue/package.json +++ b/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",