bug: SerializeObject<UndefinedToOptional<X>> is incompatible

Provide environment information

  System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 96.77 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Brave Browser: 103.1.41.100
    Chrome: 107.0.5304.110
    Safari: 15.3
  npmPackages:
    @tanstack/react-query: ^4.18.0 => 4.18.0 
    @trpc/client: ^10.4.1 => 10.4.1 
    @trpc/react-query: ^10.4.1 => 10.4.1 
    @trpc/server: ^10.4.1 => 10.4.1 
    next: ^12.0.8 => 12.0.8 
    react: ^17.0.2 => 17.0.2 
    typescript: ^4.5.4 => 4.5.4 

Describe the bug

I was on v10.0.0-rc.8 and upgraded to latest (as of now) v10.4.1 and suddenly got type errors on some frontend(react) calls. On the server, the return type of the endpoint is a User interface generated by zod

When retrieving the data using useQuery, there’s an error when I pass down the data returned by the endpoint to a child component expected that same User interface

  const { data: user, error, isLoading } = trpc.user.getByEmail.useQuery(email)
  ...
  <SomeComponent user={user} ... /> 

result in

Type 'SerializeObject<UndefinedToOptional<{ source?: "organic" | "organic-invite" | "organic-invite-pending" | "admin-invite"; title?: userTitles; _uui
d?: string; created_by?: string; invited_by?: unknown; isVerified?: boolean; ... 12 more ...; ssoSignup: boolean; }>>' is not assignable to type '{ source?: "organic" | "organic-invite" | "organic-invite-pending" | "ad
min-invite"; title?: userTitles; _uuid?: string; created_by?: string; invited_by?: unknown; isVerified?: boolean; ... 12 more ...; ssoSignup: boolean; }'.
 Types of property 'nameInfo' are incompatible.
   Type 'SerializeObject<UndefinedToOptional<{ firstName: string; lastName: string; }>>' is not assignable to type '{ firstName: string; lastName: string; }'.
     Property 'firstName' is optional in type 'SerializeObject<UndefinedToOptional<{ firstName: string; lastName: string; }>>' but required in type '{ firstName: string; lastName: string; }'.

47         <MyChildComponent user={user} />

I’m assuming this was introduced in 10.2.0 maybe?

Link to reproduction

https://stackblitz.com/edit/github-4mkvan?file=src/pages/index.tsx

*** Edit *** I was able to reproduce on stackblitz but now after a small cleanup the error is gone and I can’t reproduce 😕 Trying to reproduce again

To reproduce

The user passed down to the child component triggers a typescript error in src/pages/index.tsx in the provided example

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I’d be down to file a PR fixing this bug!

[KATT]

While I agree that every project should have strict mode, it might be a decent barrier of entry for people trying to migrate or use tPRC on an existing project

I agree but we can’t cater to that. It’s near-impossible to test & we aren’t getting paid [much] to maintain tRPC.

[abeauchemin-planned]

Thanks for your response. Nope, not using the inference helpers AFAIK. I’m looking for a way to give you a reproducible repo. It happened to all our devs so far so there’s definitely something going on in our repo, unfortunately it’s private but I’ll try to extract only the relevant part in something I can share