Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
WalkthroughSets up Apollo GraphQL Code Generator to generate TypeScript types from a GraphQL schema located at Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
codegen.ts (1)
3-9: Addoverwriteandtypescript-operationsbefore query files landTwo gaps in the current config:
overwrite: trueis missing. Without it, codegen will interactively prompt before overwriting the output file, breaking non-interactive CI runs.
typescript-operationsplugin is absent. Apollo's own codegen docs recommend installing and using both@graphql-codegen/typescriptand@graphql-codegen/typescript-operations, noting "we recommend using the typescript and typescript-operations plugins directly (at minimum)". Addingtypescript-operationsnow (together with adocumentsglob andignoreNoDocuments: true) means the config is ready the moment the first.graphqloperation file is committed.♻️ Proposed expansion
const config: CodegenConfig = { + overwrite: true, schema: "./apps/cms/schema.graphql", + documents: ["apps/web/src/**/*.{ts,tsx}"], + ignoreNoDocuments: true, generates: { "./apps/web/src/generated/graphql.ts": { - plugins: ["typescript"], + plugins: ["typescript", "typescript-operations"], }, }, -}; +}Also add the plugin package in root
package.json:"@graphql-codegen/typescript": "^5.0.7", + "@graphql-codegen/typescript-operations": "^4.5.1",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@codegen.ts` around lines 3 - 9, The Codegen config (variable config: CodegenConfig) is missing overwrite and the typescript-operations plugin and should be prepared for operation files; update the config object to include overwrite: true at the top level, add "typescript-operations" to the plugins array for the output target (alongside "typescript"), add a documents glob (e.g., pattern for .graphql/.ts/.tsx operation files) and set ignoreNoDocuments: true so CI won't fail when no documents exist, and also add the npm package `@graphql-codegen/typescript-operations` to root package.json dependencies/devDependencies so the plugin is available at runtime.package.json (1)
12-12: Consider integratingcodegen:graphqlinto the maincodegenscriptIssue
#40asks for a codegen script runnable from the repo root. Right nowpnpm run codegenskips the GraphQL step. Consumers need to know to runcodegen:graphqlseparately.♻️ Proposed integration
- "codegen": "pnpm --filter `@forge/tooling-codegen` run generate && pnpm --filter `@forge/tooling-codegen` run verify", + "codegen": "graphql-codegen --config codegen.ts && pnpm --filter `@forge/tooling-codegen` run generate && pnpm --filter `@forge/tooling-codegen` run verify",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` at line 12, Modify the root package.json "codegen" script so it runs the GraphQL codegen step as part of the main codegen flow: update the "codegen" script to invoke the existing codegen tasks plus the "codegen:graphql" script (for example by chaining with && or using a task runner) so running `pnpm run codegen` executes both the general codegen and the "codegen:graphql" command; ensure you reference the existing "codegen" and "codegen:graphql" script names and preserve error propagation (fail the overall script if the GraphQL step fails).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/package.json`:
- Around line 13-15: Add the missing peer dependency "rxjs" to
apps/web/package.json so `@apollo/client` (version ^4.1.4) has its required peer;
update the "dependencies" block to include "rxjs" with a compatible semver
(e.g., ^7.3.0) alongside "@apollo/client" and "graphql" to silence pnpm peer
warnings and ensure Apollo's observable layer works at runtime.
In `@codegen.ts`:
- Around line 1-12: Remove semicolons from this file to satisfy Prettier: delete
the trailing semicolons on the import line, after the const declaration for
config, and after the export default config statement. Update the import line,
the declaration of const config and the export default config to be
semicolon-free so the file conforms to the project's Prettier rules and CI
checks.
---
Nitpick comments:
In `@codegen.ts`:
- Around line 3-9: The Codegen config (variable config: CodegenConfig) is
missing overwrite and the typescript-operations plugin and should be prepared
for operation files; update the config object to include overwrite: true at the
top level, add "typescript-operations" to the plugins array for the output
target (alongside "typescript"), add a documents glob (e.g., pattern for
.graphql/.ts/.tsx operation files) and set ignoreNoDocuments: true so CI won't
fail when no documents exist, and also add the npm package
`@graphql-codegen/typescript-operations` to root package.json
dependencies/devDependencies so the plugin is available at runtime.
In `@package.json`:
- Line 12: Modify the root package.json "codegen" script so it runs the GraphQL
codegen step as part of the main codegen flow: update the "codegen" script to
invoke the existing codegen tasks plus the "codegen:graphql" script (for example
by chaining with && or using a task runner) so running `pnpm run codegen`
executes both the general codegen and the "codegen:graphql" command; ensure you
reference the existing "codegen" and "codegen:graphql" script names and preserve
error propagation (fail the overall script if the GraphQL step fails).
| "@apollo/client": "^4.1.4", | ||
| "@forge/client-ts-web": "workspace:*", | ||
| "graphql": "^16.12.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check the current state of apps/web/package.json
cat apps/web/package.jsonRepository: JesusFilm/forge
Length of output: 739
🏁 Script executed:
# Check if rxjs is anywhere in the codebase
rg '"rxjs"' --max-count 20Repository: JesusFilm/forge
Length of output: 41
🏁 Script executed:
# Check root package.json
cat package.jsonRepository: JesusFilm/forge
Length of output: 1034
🌐 Web query:
Apollo Client v4 rxjs peer dependency requirements
💡 Result:
Apollo Client v4 adds RxJS as a peer dependency—you must install rxjs yourself. Apollo’s v4 migration guide calls out rxjs as a new peer dep and shows installing it alongside @apollo/client and graphql. [1]
For @apollo/client@4.0.0, the declared peer requirement is:
rxjs:^7.3.0(i.e., RxJS 7.3+ within major v7) [2]
Sources: [1] [2]
Add missing rxjs peer dependency for @apollo/client v4
@apollo/client v4.1.4 requires rxjs (v7.3+) as a peer dependency. Without it in dependencies, pnpm will warn about the missing peer and Apollo Client's observable layer will fail at runtime.
📦 Add the missing peer dependency
"dependencies": {
"@apollo/client": "^4.1.4",
+ "rxjs": "^7.8.0",
"@forge/client-ts-web": "workspace:*",
"graphql": "^16.12.0",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@apollo/client": "^4.1.4", | |
| "@forge/client-ts-web": "workspace:*", | |
| "graphql": "^16.12.0", | |
| "@apollo/client": "^4.1.4", | |
| "rxjs": "^7.8.0", | |
| "@forge/client-ts-web": "workspace:*", | |
| "graphql": "^16.12.0", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/package.json` around lines 13 - 15, Add the missing peer dependency
"rxjs" to apps/web/package.json so `@apollo/client` (version ^4.1.4) has its
required peer; update the "dependencies" block to include "rxjs" with a
compatible semver (e.g., ^7.3.0) alongside "@apollo/client" and "graphql" to
silence pnpm peer warnings and ensure Apollo's observable layer works at
runtime.
| import type { CodegenConfig } from "@graphql-codegen/cli"; | ||
|
|
||
| const config: CodegenConfig = { | ||
| schema: "./apps/cms/schema.graphql", | ||
| generates: { | ||
| "./apps/web/src/generated/graphql.ts": { | ||
| plugins: ["typescript"], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default config; |
There was a problem hiding this comment.
Prettier violations will fail CI — remove semicolons
Static analysis reports Delete ";" on lines 1, 10, and 12. The project Prettier config disables semicolons; this file must match.
🐛 Proposed fix
-import type { CodegenConfig } from "@graphql-codegen/cli";
+import type { CodegenConfig } from "@graphql-codegen/cli"
const config: CodegenConfig = {
schema: "./apps/cms/schema.graphql",
generates: {
"./apps/web/src/generated/graphql.ts": {
plugins: ["typescript"],
},
},
-};
+}
-export default config;
+export default config📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import type { CodegenConfig } from "@graphql-codegen/cli"; | |
| const config: CodegenConfig = { | |
| schema: "./apps/cms/schema.graphql", | |
| generates: { | |
| "./apps/web/src/generated/graphql.ts": { | |
| plugins: ["typescript"], | |
| }, | |
| }, | |
| }; | |
| export default config; | |
| import type { CodegenConfig } from "@graphql-codegen/cli" | |
| const config: CodegenConfig = { | |
| schema: "./apps/cms/schema.graphql", | |
| generates: { | |
| "./apps/web/src/generated/graphql.ts": { | |
| plugins: ["typescript"], | |
| }, | |
| }, | |
| } | |
| export default config |
🧰 Tools
🪛 ESLint
[error] 1-1: Delete ;
(prettier/prettier)
[error] 10-10: Delete ;
(prettier/prettier)
[error] 12-12: Delete ;
(prettier/prettier)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@codegen.ts` around lines 1 - 12, Remove semicolons from this file to satisfy
Prettier: delete the trailing semicolons on the import line, after the const
declaration for config, and after the export default config statement. Update
the import line, the declaration of const config and the export default config
to be semicolon-free so the file conforms to the project's Prettier rules and CI
checks.
|
Superseded by #60 (gql.tada + packages/graphql). |
1 participant
Summary
Apollo/GraphQL codegen setup for web. Generates TypeScript types from Strapi schema. Web ready for Apollo Client + Experience queries (#41).
Resolves #40
Contracts Changed
Regeneration Required
Validation
Summary by CodeRabbit
New Features
Chores