From 0109f534403f3ac739e5a90f474c6ee8546ff356 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 10 Jan 2024 16:56:53 +0200 Subject: [PATCH 1/8] remove usage of graphql-let, replace it with direct usage of graphql-codegen --- .../graphql/GraphQL-ConnectedDemo.dynamic.tsx | 2 +- .../src/templates/nextjs/.graphql-let.yml | 8 -------- .../src/templates/nextjs/graphql-codegen.yml | 9 +++++++++ .../src/templates/nextjs/package.json | 12 +++++++----- .../nextjs/src/lib/next-config/plugins/graphql.js | 4 ++-- .../src/templates/nextjs/tsconfig.json | 2 +- 6 files changed, 20 insertions(+), 17 deletions(-) delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs/.graphql-let.yml create mode 100644 packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml 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 e6722af6e1..18af227af2 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 @@ -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, diff --git a/packages/create-sitecore-jss/src/templates/nextjs/.graphql-let.yml b/packages/create-sitecore-jss/src/templates/nextjs/.graphql-let.yml deleted file mode 100644 index 474bdea382..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs/.graphql-let.yml +++ /dev/null @@ -1,8 +0,0 @@ -schema: - - './src/temp/GraphQLIntrospectionResult.json' -documents: 'src/**/*.graphql' -plugins: - - typescript-operations - - typed-document-node -config: - useIndexSignature: true diff --git a/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml b/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml new file mode 100644 index 0000000000..5c9b989599 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs/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' \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json index 88381c0784..8d907f4b71 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json @@ -34,12 +34,13 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@graphql-codegen/cli": "^1.21.8", + "@graphql-codegen/cli": "^5.0.0", "@graphql-codegen/import-types-preset": "^2.2.6", - "@graphql-codegen/plugin-helpers": "^3.1.2", + "@graphql-codegen/plugin-helpers": "^5.0.2", "@graphql-codegen/typed-document-node": "^2.3.12", "@graphql-codegen/typescript": "^2.8.7", "@graphql-codegen/typescript-operations": "^2.5.12", + "@graphql-codegen/typescript-react-query": "^6.0.0", "@graphql-codegen/typescript-resolvers": "^2.7.12", "@graphql-typed-document-node/core": "^3.1.1", "@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 && jss 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" } } diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/graphql.js b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/graphql.js index c38787a85b..f0d4557aab 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/graphql.js +++ b/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({ diff --git a/packages/create-sitecore-jss/src/templates/nextjs/tsconfig.json b/packages/create-sitecore-jss/src/templates/nextjs/tsconfig.json index 223ec264e1..e10ebebf27 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/tsconfig.json +++ b/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", From e5e6587c1761eb75e5488bfebf757940fecc14ca Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Jan 2024 10:19:38 +0200 Subject: [PATCH 2/8] nextjs sample - upgrade graphql-codegen packages --- .../src/templates/nextjs/package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json index 8d907f4b71..c73a06e6d5 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json @@ -35,14 +35,14 @@ }, "devDependencies": { "@graphql-codegen/cli": "^5.0.0", - "@graphql-codegen/import-types-preset": "^2.2.6", - "@graphql-codegen/plugin-helpers": "^5.0.2", - "@graphql-codegen/typed-document-node": "^2.3.12", - "@graphql-codegen/typescript": "^2.8.7", - "@graphql-codegen/typescript-operations": "^2.5.12", + "@graphql-codegen/import-types-preset": "^3.0.0", + "@graphql-codegen/plugin-helpers": "^5.0.1", + "@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": "^2.7.12", - "@graphql-typed-document-node/core": "^3.1.1", + "@graphql-codegen/typescript-resolvers": "^4.0.1", + "@graphql-typed-document-node/core": "^3.2.0", "@sitecore-jss/sitecore-jss-cli": "~21.7.0-canary", "@sitecore-jss/sitecore-jss-dev-tools": "~21.7.0-canary", "@types/node": "^18.11.18", From 183b35a1bb33fcf225921c73107d9dc92d6a846f Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 15 Jan 2024 14:09:42 +0200 Subject: [PATCH 3/8] by default the documents line in graphql codegen config file is commented in nextjs template --- .../src/templates/nextjs/graphql-codegen.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml b/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml index 5c9b989599..bf612d513d 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml +++ b/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml @@ -1,5 +1,5 @@ overwrite: true -documents: 'src/**/*.graphql' +# documents: 'src/**/*.graphql' schema: 'src/temp/GraphQLIntrospectionResult.json' generates: src/temp/graphql-types.ts: From 8373ec139810b8b53b0df28fcfca29b695d50965 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 15 Jan 2024 14:10:21 +0200 Subject: [PATCH 4/8] add graphql codegen config file in nextjs stylguide addon template --- .../src/templates/nextjs-styleguide/graphql-codegen.yml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 packages/create-sitecore-jss/src/templates/nextjs-styleguide/graphql-codegen.yml diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/graphql-codegen.yml b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/graphql-codegen.yml new file mode 100644 index 0000000000..57b68ce09c --- /dev/null +++ b/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' From f0782c8eada301e83eb6e75b9cbfa90ab0ad8a83 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 15 Jan 2024 15:30:53 +0200 Subject: [PATCH 5/8] remove gitignore entries for graphql-let generated files in nextjs template --- packages/create-sitecore-jss/src/templates/nextjs/gitignore | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs/gitignore b/packages/create-sitecore-jss/src/templates/nextjs/gitignore index b9d296990d..f75e649586 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/gitignore +++ b/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 From 3ae825d30bf49b19003d22eb6a2295e1e65e26c7 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 15 Jan 2024 16:22:46 +0200 Subject: [PATCH 6/8] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d7cfccfaa..e03423be4a 100644 --- a/CHANGELOG.md +++ b/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 From 4b5ed53bc4a2d8838b6bbc8c14189fccc168c92b Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 16 Jan 2024 14:02:12 +0200 Subject: [PATCH 7/8] [templates/nextjs] add comment to clarify the commented out line in codegen config file --- .../src/templates/nextjs/graphql-codegen.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml b/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml index bf612d513d..7949315ded 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml +++ b/packages/create-sitecore-jss/src/templates/nextjs/graphql-codegen.yml @@ -1,4 +1,6 @@ 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: @@ -6,4 +8,4 @@ generates: plugins: - 'typescript' - 'typescript-operations' - - 'typescript-react-query' \ No newline at end of file + - 'typescript-react-query' From 948733b4f4ac27952188def1eb5fae9496c0fe17 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 16 Jan 2024 14:32:24 +0200 Subject: [PATCH 8/8] update the bootstrap command --- packages/create-sitecore-jss/src/templates/nextjs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json index c73a06e6d5..0c299a8098 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json @@ -72,7 +72,7 @@ "scripts": { "jss": "jss", "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts", - "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts && jss graphql-codegen", + "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",