Hey team! 👋
I was going through the AdonisJS v7 fullstack React/Inertia tutorial and ran into a strict TypeScript error on the frontend when following the code exactly.
Minimal Reproduction
Reproduction Repository
If you clone the repo above, run pnpm install, and run pnpm run typecheck, you will get the following TypeScript error originating from @generated/data missing the author property:
Property 'author' does not exist on type '{ id: number; createdAt: string | null; content: string; }'.ts(2339)
The Issue Context
Currently, the tutorial instructs us to update the PostTransformer like this:
// app/transformers/post_transformer.ts
export default class PostTransformer extends BaseTransformer<Post> {
toObject() {
return {
// ...
comments: CommentTransformer.transform(this.whenLoaded(this.resource.comments)),
}
}
}
However, under the hood, @adonisjs/http-transformers enforces a maximum resolution depth of 1 by default for nested .transform() calls. Because CommentTransformer implicitly includes another nested relation (UserTransformer for the author property), the depth exceeds 1. As a result, the author property is completely stripped out of the generated Data.Post TypeScript definition (@generated/data), resulting in the frontend TypeScript error missing author.
The Fix
Since the framework logic is sound (preventing infinite recursion), the tutorial simply needs to instruct users to append .depth(2) when transforming the comments collection.
Suggested changes to the tutorial:
Update the snippet in the Update the Post transformer section (in content/docs/tutorial/react/routes_controller_views.md) to include the .depth(2) method:
- comments: CommentTransformer.transform(this.whenLoaded(this.resource.comments)),
+ comments: CommentTransformer.transform(this.whenLoaded(this.resource.comments))?.depth(2),
(Note: The optional chaining ?.depth(2) was required to satisfy TypeScript in case this.resource.comments is not loaded, but .depth(2) is the key fix here).
If it's ok, I can take on the task of updating the docs and create a PR.
Thank you for an awesome tutorial and framework, just wanted to point this out so others don't get stuck on the TypeScript typecheck step! 🚀
Hey team! 👋
I was going through the AdonisJS v7 fullstack React/Inertia tutorial and ran into a strict TypeScript error on the frontend when following the code exactly.
Minimal Reproduction
Reproduction Repository
If you clone the repo above, run
pnpm install, and runpnpm run typecheck, you will get the following TypeScript error originating from@generated/datamissing theauthorproperty:The Issue Context
Currently, the tutorial instructs us to update the
PostTransformerlike this:However, under the hood,
@adonisjs/http-transformersenforces a maximum resolution depth of1by default for nested.transform()calls. BecauseCommentTransformerimplicitly includes another nested relation (UserTransformerfor theauthorproperty), the depth exceeds1. As a result, theauthorproperty is completely stripped out of the generatedData.PostTypeScript definition (@generated/data), resulting in the frontend TypeScript error missingauthor.The Fix
Since the framework logic is sound (preventing infinite recursion), the tutorial simply needs to instruct users to append
.depth(2)when transforming the comments collection.Suggested changes to the tutorial:
Update the snippet in the Update the Post transformer section (in
content/docs/tutorial/react/routes_controller_views.md) to include the.depth(2)method:(Note: The optional chaining
?.depth(2)was required to satisfy TypeScript in casethis.resource.commentsis not loaded, but.depth(2)is the key fix here).If it's ok, I can take on the task of updating the docs and create a PR.
Thank you for an awesome tutorial and framework, just wanted to point this out so others don't get stuck on the TypeScript typecheck step! 🚀