[React][Vue]Exception while rendering GraphQL page (#900)

* [React][Vue] Use @apollo/client and upgrade it

* Add js-sha256

* Revert package

Author: illiakovalenko

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

@@ -31,20 +31,17 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@apollo/client": "^3.5.6",
     "@sitecore-jss/sitecore-jss-react": "^20.0.0-canary",
-    "apollo-cache-inmemory": "~1.6.3",
-    "apollo-client": "~2.6.4",
-    "apollo-link": "~1.2.13",
-    "apollo-link-batch-http": "~1.2.13",
-    "apollo-link-http": "~1.5.16",
-    "apollo-link-persisted-queries": "~0.2.2",
+    "apollo-client": "^2.6.10",
     "axios": "^0.21.1",
     "bootstrap": "^4.3.1",
     "cross-fetch": "^3.0.6",
     "deep-equal": "^2.0.5",
     "graphql": "~14.5.7",
     "graphql-tag": "~2.10.1",
     "i18next": "^19.9.2",
+    "js-sha256": "^0.9.0",
     "react": "^17.0.2",
     "react-apollo": "~3.1.1",
     "react-app-polyfill": "^1.0.6",

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

@@ -1,8 +1,8 @@
 /* eslint-disable import/first */
 
 import 'cross-fetch/polyfill';
-import { ApolloClient } from 'apollo-client';
-import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { sha256 } from 'js-sha256';
 
 /* eslint-disable import/order */
 
@@ -26,17 +26,17 @@ import introspectionQueryResultData from '../temp/GraphQLFragmentTypes.json';
 // const link = createHttpLink({ uri: endpoint });
 
 // ...or a batched link (multiple queries within 10ms all go in one HTTP request)
-import { BatchHttpLink } from 'apollo-link-batch-http';
+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-link-persisted-queries';
+import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
 import config from '../temp/config';
 
 export default function (endpoint, ssr, initialCacheState) {
   /* HTTP link selection: default to batched + APQ */
-  const link = createPersistedQueryLink().concat(
+  const link = createPersistedQueryLink({ sha256 }).concat(
     new BatchHttpLink({
       uri: endpoint,
       headers: {
@@ -46,10 +46,14 @@ export default function (endpoint, ssr, initialCacheState) {
     })
   );
 
+  const possibleTypes = {};
+
+  introspectionQueryResultData.__schema.types.forEach((supertype) => {
+    possibleTypes[supertype.name] = supertype.possibleTypes.map((subtype) => subtype.name);
+  });
+
   const cache = new InMemoryCache({
-    fragmentMatcher: new IntrospectionFragmentMatcher({
-      introspectionQueryResultData,
-    }),
+    possibleTypes,
   });
 
   return new ApolloClient({

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

@@ -46,19 +46,18 @@
     "lint": "vue-cli-service lint ./src/**/*.vue ./src/**/*.js ./sitecore/definitions/**/*.js ./scripts/**/*.js ./server/**/*.js ./data/**/*.yml"
   },
   "dependencies": {
-    "@apollo/client": "~3.3.19",
+    "@apollo/client": "^3.5.6",
     "@panter/vue-i18next": "~0.15.1",
     "@sitecore-jss/sitecore-jss-vue": "^20.0.0-canary",
     "@vue/apollo-composable": "^4.0.0-alpha.12",
     "@vue/apollo-option": "^4.0.0-alpha.11",
     "@vue/apollo-ssr": "^4.0.0-alpha.11",
     "@vue/server-renderer": "^3.0.11",
-    "apollo-link-batch-http": "~1.2.13",
-    "apollo-link-persisted-queries": "~0.2.2",
     "axios": "^0.21.1",
     "bootstrap": "^4.3.1",
     "cross-fetch": "~2.2.3",
     "graphql": "^15.5.0",
+    "js-sha256": "^0.9.0",
     "register-service-worker": "~1.6.2",
     "serialize-javascript": "^5.0.1",
     "vue": "^v3.1.0-beta.6",

packages/create-sitecore-jss/src/templates/vue/server/server.vue.config.js

@@ -60,7 +60,7 @@ const vueConfig = {
     */
 
     config.module.rules.unshift({
-      test: /\.(?!js|vue|ts|html|graphql|gql|png|jpe?g|gif|webp|svg|woff2?|eot|ttf|otf$)[^.]+$/,
+      test: /\.(?!js|cjs|vue|ts|html|graphql|gql|png|jpe?g|gif|webp|svg|woff2?|eot|ttf|otf$)[^.]+$/,
       use: {
         loader: 'null-loader',
       },

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

@@ -1,5 +1,6 @@
 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
@@ -19,17 +20,17 @@ import introspectionQueryResultData from '../temp/GraphQLFragmentTypes.json';
 // choose between a basic HTTP link to run queries...
 
 // ...or a batched link (multiple queries within 10ms all go in one HTTP request)
-import { BatchHttpLink } from 'apollo-link-batch-http';
+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-link-persisted-queries';
+import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
 import config from '../temp/config';
 
 export default function (endpoint, ssr, initialCacheState) {
   /* HTTP link selection: default to batched + APQ */
-  const link = createPersistedQueryLink().concat(
+  const link = createPersistedQueryLink({ sha256 }).concat(
     new BatchHttpLink({
       uri: endpoint,
       headers: {