Type import using old definitions when updating the type

JanVanBraeckel commented 2 years ago

Current Behavior

We're using https://trpc.io/ in a new project, which enables full-stack type safety without any generators or need to declare your own interfaces. It does this by inferring the return types of the backend methods and exposing them via a TypeScript type which the app (react in this case) can import using import type .... This type is then used to create a query client, which can enforce type safety.

However, we're experiencing some issues when updating a return type in the backend and then using new properties in the frontend. VSCode intellisense correctly references new properties, but saving the file in the client app generates a TS2339: Property 'foo' does not exist on type 'old_type_before_adding_extra_properties'

Is there any caching going on in the type checker that's run during development? Ending the serve process and restarting it resolves the issue, but this is quite cumbersome to do every time a backend type changes.

Patching @nrwl/web/src/utils/config.js and removing the ForkTsCheckerWebpackPlugin resolves the issue, but of course we'd like to keep type checking during development.

Expected Behavior

Updated type imports should work without the need of restarting the client serve process.

Steps to Reproduce

Repro project: https://github.com/JanVanBraeckel/nx-trpc-typings-repro

Install dependencies
Start server and client (nx serve client, nx serve server)
Navigate to libs/shared/trpc-router/src/index.ts. Add a property to the dictionary item on line 4 (eg: foo: "bar")
Navigate to apps/client/src/app/dictionary-page.tsx. Try to render {dictionary.foo} on line 10

You should now see the TS2339 error.

Failure Logs

Issues checking in progress...
ERROR in apps/client/src/app/dictionary-page.tsx:11:41
TS2339: Property 'foo' does not exist on type '{ id: number; name: string; }'.
     9 |       {dictionaries?.map((dictionary, i) => (
    10 |         <div key={i}>
  > 11 |           {dictionary.name} {dictionary.foo}
       |                                         ^^^
    12 |         </div>
    13 |       ))}
    14 |     </>

Environment

   Node : 14.18.3
   OS   : darwin x64
   yarn : 1.22.19

   nx : 14.2.4
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.2.4
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.2.4
   @nrwl/eslint-plugin-nx : 14.2.4
   @nrwl/express : 14.2.4
   @nrwl/jest : 14.2.4
   @nrwl/js : 14.2.4
   @nrwl/linter : 14.2.4
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.2.4
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.2.4
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.2.4
   @nrwl/web : 14.2.4
   @nrwl/workspace : 14.2.4
   typescript : 4.7.3
   ---------------------------------------
   Community plugins:

Pruxis commented 2 years ago

By adding "../../libs/shared/trpc-router/src/index.ts" to the tsconfig.app.json you can make sure that the react application's TSC is always in sync with the types it's importing.

JanVanBraeckel commented 2 years ago

By adding "../../libs/shared/trpc-router/src/index.ts" to the tsconfig.app.json you can make sure that the react application's TSC is always in sync with the types it's importing.

That's indeed a partial fix. However, if the index file uses any other files (eg a utils file) to transform response output, it will still fail. I don't think we should be expected to include all backend files in the tsconfig of the frontend just so the typings would be correct

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

bigcakes commented 1 year ago

We are hitting this as well unless we export the types from the library

Nick-Lucas commented 1 year ago

Also finding this to be a frustration.

I've tried adding the file which exports the tRPC AppRouter type to files include and also adding the API project tsconfig under references. None of these lead to incremental type builds working properly during development, though dismissing the type error overlay the application does work so it's still building fine.

Anyone here made more progress solving the issue?

bigcakes commented 1 year ago

@Nick-Lucas I had to export the types from my library to get the types rebuilding

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

Nick-Lucas commented 1 year ago

please reply to keep it active.

github-actions[bot] commented 8 months ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

th1nkful commented 8 months ago

please reply to keep it active.

github-actions[bot] commented 2 weeks ago

This issue has been automatically marked as stale because it hasn't had any activity for 6 months. Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore. If at this point, this is still an issue, please respond with updated information. It will be closed in 21 days if no further activity occurs. Thanks for being a part of the Nx community! 🙏

nrwl / nx