[templates/nextjs] [templates/nextjs-styleguide] Remove graphql-let and rely directly on graphql-codegen for graphql code generation

CHANGELOG.md

@@ -27,6 +27,10 @@ Our versioning strategy is as follows:
 * Upgrade to Node.js 20.x ([#1679](https://github.com/Sitecore/jss/pull/1679))([#1681](https://github.com/Sitecore/jss/pull/1681))
 * `[nextjs/template]` Upgrade graphql-codegen packages to latest ([#1711](https://github.com/Sitecore/jss/pull/1711))
 
+### 🛠 Breaking Changes
+
+* `[templates/nextjs]` `[templates/nextjs-styleguide]` Remove graphql-let and rely directly on graphql-codegen for graphql code generation. ([#1713](https://github.com/Sitecore/jss/pull/1713))
+
 ## 21.6.0
 
 ### 🎉 New Features & Improvements

packages/create-sitecore-jss/src/templates/nextjs-styleguide/graphql-codegen.yml

@@ -0,0 +1,9 @@
+overwrite: true
+documents: 'src/**/*.graphql'
+schema: 'src/temp/GraphQLIntrospectionResult.json'
+generates:
+  src/temp/graphql-types.ts:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-query'

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx

@@ -12,7 +12,7 @@ import {
   resetEditorChromes
 } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import NextLink from 'next/link';
-import { ConnectedDemoQueryDocument } from './GraphQL-ConnectedDemo.dynamic.graphql';
+import { ConnectedDemoQueryDocument } from 'graphql-types';
 import {
   <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute as AppRoute,
   Item,

packages/create-sitecore-jss/src/templates/nextjs/gitignore

@@ -10,11 +10,6 @@
 /.next*/
 /out/
 
-# graphql code generation
-/.generated
-*.graphql.d.ts
-*.graphqls.d.ts
-
 # misc
 .DS_Store
 

packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml

@@ -0,0 +1,11 @@
+overwrite: true
+# by default graphql-codegen will throw an error if it does not find any files in the specified path for 'documents'
+# uncomment next line if you have .graphql files under '/src';
+# documents: 'src/**/*.graphql'
+schema: 'src/temp/GraphQLIntrospectionResult.json'
+generates:
+  src/temp/graphql-types.ts:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-query'

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

@@ -40,6 +40,7 @@
     "@graphql-codegen/typed-document-node": "^5.0.1",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@graphql-codegen/typescript-react-query": "^6.0.0",
     "@graphql-codegen/typescript-resolvers": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@sitecore-jss/sitecore-jss-cli": "~21.7.0-canary",
@@ -49,6 +50,7 @@
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
+    "@tanstack/react-query": "^5.17.9",
     "chalk": "~4.1.2",
     "chokidar": "~3.5.3",
     "constant-case": "^3.0.4",
@@ -60,7 +62,6 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-yaml": "^0.5.0",
-    "graphql-let": "^0.18.6",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
     "ts-node": "^10.9.1",
@@ -71,7 +72,7 @@
   "scripts": {
     "jss": "jss",
     "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
-    "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts && graphql-let",
+    "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts && npm run graphql-codegen",
     "build": "npm-run-all --serial bootstrap next:build",
     "graphql:update": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
     "next:build": "next build",
@@ -81,6 +82,7 @@
     "start:connected": "npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
     "start:production": "npm-run-all --serial bootstrap next:build next:start",
     "start:watch-components": "ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch",
-    "install-pre-push-hook": "ts-node --project tsconfig.scripts.json ./scripts/install-pre-push-hook.ts"
+    "install-pre-push-hook": "ts-node --project tsconfig.scripts.json ./scripts/install-pre-push-hook.ts",
+    "graphql-codegen": "graphql-codegen --config graphql-codegen.yml"
   }
 }

packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/graphql.js

@@ -7,13 +7,13 @@ const graphqlPlugin = (nextConfig = {}) => {
       config.module.rules.push({
         test: /\.graphql$/,
         exclude: /node_modules/,
-        use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
+        use: [options.defaultLoaders.babel, { loader: 'graphql-tag/loader' }],
       });
 
       config.module.rules.push({
         test: /\.graphqls$/,
         exclude: /node_modules/,
-        use: ['graphql-let/schema/loader'],
+        use: ['graphql-tag/loader'],
       });
 
       config.module.rules.push({

packages/create-sitecore-jss/src/templates/nextjs/tsconfig.json

@@ -6,7 +6,7 @@
       "lib/*": ["src/lib/*"],
       "temp/*": ["src/temp/*"],
       "assets/*": ["src/assets/*"],
-      "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
+      "graphql-types": ["src/temp/graphql-types.ts"],
       "react": ["node_modules/react"]
     },
     "target": "es5",