Skip to content

[Docs] Tutorial missing .depth() for nested Comment relations in PostTransformer (React/Inertia tutorial) #6

@Julius-Java

Description

@Julius-Java

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! 🚀

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions