diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx
index f04719e6b3..44af181900 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx
+++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx
@@ -111,11 +111,15 @@ export const getStaticProps: GetStaticComponentProps = async (rendering, layoutD
     apiKey: config.sitecoreApiKey,
   });
 
-  const result = await graphQLClient.request<GraphQLConnectedDemoData>(ConnectedDemoQueryDocument, {
-    datasource: rendering.dataSource,
-    contextItem: layoutData?.sitecore?.route?.itemId,
-    language: layoutData?.sitecore?.context?.language,
-  });
+  const result = await graphQLClient.request<GraphQLConnectedDemoData>(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ConnectedDemoQueryDocument as any,
+    {
+      datasource: rendering.dataSource,
+      contextItem: layoutData?.sitecore?.route?.itemId,
+      language: layoutData?.sitecore?.context?.language,
+    }
+  );
 
   return result;
 };
@@ -135,11 +139,15 @@ export const getServerSideProps: GetServerSideComponentProps = async (rendering,
     apiKey: config.sitecoreApiKey,
   });
 
-  const result = await graphQLClient.request<GraphQLConnectedDemoData>(ConnectedDemoQueryDocument, {
-    datasource: rendering.dataSource,
-    contextItem: layoutData?.sitecore?.route?.itemId,
-    language: layoutData?.sitecore?.context?.language,
-  });
+  const result = await graphQLClient.request<GraphQLConnectedDemoData>(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ConnectedDemoQueryDocument as any,
+    {
+      datasource: rendering.dataSource,
+      contextItem: layoutData?.sitecore?.route?.itemId,
+      language: layoutData?.sitecore?.context?.language,
+    }
+  );
 
   return result;
 };
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
index 66b78c177a..93f5d92b72 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/package.json
+++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -30,7 +30,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@sitecore-jss/sitecore-jss-nextjs": "^21.0.0-canary",
-    "graphql": "~15.4.0",
+    "graphql": "~15.8.0",
     "graphql-tag": "^2.11.0",
     "next": "^12.1.6",
     "next-localization": "^0.12.0",
diff --git a/packages/sitecore-jss/package.json b/packages/sitecore-jss/package.json
index 80bd60aad2..e2fd27e8e1 100644
--- a/packages/sitecore-jss/package.json
+++ b/packages/sitecore-jss/package.json
@@ -56,7 +56,7 @@
     "axios": "^0.21.1",
     "chalk": "^4.1.0",
     "debug": "^4.3.1",
-    "graphql": "^15.4.0",
+    "graphql": "^16.5.0",
     "graphql-request": "^4.2.0",
     "lodash.unescape": "^4.0.1",
     "memory-cache": "^0.2.0",
diff --git a/yarn.lock b/yarn.lock
index 5d7edbaec7..7f8f25e7f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4152,7 +4152,7 @@ __metadata:
     debug: ^4.3.1
     del-cli: ^4.0.1
     eslint: ^7.15.0
-    graphql: ^15.4.0
+    graphql: ^16.5.0
     graphql-request: ^4.2.0
     lodash.unescape: ^4.0.1
     memory-cache: ^0.2.0
@@ -13116,10 +13116,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graphql@npm:^15.4.0":
-  version: 15.7.2
-  resolution: "graphql@npm:15.7.2"
-  checksum: eacb746e2981d0c346ef7365601873963af5356f64ce4d890ab89d213c67bf5bc1ae957b93c3902198798774c842b55dff219f38bad858691765e4debc265750
+"graphql@npm:^16.5.0":
+  version: 16.5.0
+  resolution: "graphql@npm:16.5.0"
+  checksum: a82a926d085818934d04fdf303a269af170e79de943678bd2726370a96194f9454ade9d6d76c2de69afbd7b9f0b4f8061619baecbbddbe82125860e675ac219e
   languageName: node
   linkType: hard