[Community help wanted!] TypeScript Feedback v0.33+

danny · June 4, 2021, 10:05am

Hey Redwood Community!

With Redwood v0.33 we’ve shipped almost complete TypeScript support, and we’re so happy to be hitting this milestone!

But… we need your help! Your favourite framework needs YOU, to give us feedback on how the dev experience has been for you, and if you’ve found any missing pieces that we should wrap up.

Some hints to help you with your feedback:

How are you finding the generated types?
Types for your graphql queries, scenarios, cells and directory named modules (i.e. src/component/module) are all generated by the dev server when you run rw dev. That means, you just import your Cells or components as you would and redwood should hook up the types for you automatically!

Do you find it helpful that the generated graphql types are not gitignore’d?
We think its useful to see the change in types, for example, when you change the query in your Cell.

Are there any cases where you’re not getting the expected types?

How to raise issues

You can raise an issue on the Github repo, and we’ll tag it correctly so it appears in the TypeScript project board here: TypeScript · GitHub

If you’re not quite ready to raise an issue, you’re more than welcome to reply here to start a conversation!

Last, but not least, thank you all for being part of this amazing community and for your contributions!

Tobbe · June 9, 2021, 6:58pm

Can’t provide a full repro yet, but I’ve noticed that sometimes I make changes to something gql related, commit my changes, and then later when I do git status and git diff I noticed my generated types have updated to reflect what I have already committed.

So, sometimes, for some reason the types don’t get generated/updated straight away, but rather a bit later, after I’ve already committed the code that caused a change in the types.

This is in a JS-only project.

viperfx · June 9, 2021, 7:13pm

Personally don’t find this useful. As long as it’s working - I am ok with it. Ive come across a few scenarios where a git merge causes a conflict on the types. So I had to choose one change, and then overwrite them by running the server.

Irev-Dev · June 9, 2021, 7:55pm

Not sure what you call the feature in Redwood, the magic imports that allows you to not have repetition in the path name, that seems to be broken for me since I started using typescript recently, though it is linting ONLY, project still builds okay, just get an annoying red squiggly. I double checked to make sure my vs-code “Redwood IDE” extension was up-to-date.

This works fine

This doesn’t

Not sure if there’s something wrong with my setup or if anyone else has the same issue?

Tobbe · June 9, 2021, 9:04pm

We call that feature “Directory-named imports”. And you’re saying you’re still seeing the squigglies with the latest version of RW (0.33)?

dthyresson · June 9, 2021, 9:38pm

I had the same experience upgrading an existing app and this seems to have address all “squigglies” but one:

yarn rw setup tsconfig --force

As per the release notes Redwood v0.33 🚀

and then

a VSCode TS and reloads.
resave any open files

My only outstanding one is:

dthyresson · June 9, 2021, 9:46pm

Update: Note the “squigglies” are gone but the file itself reports an issue in VSCode:

It was ok and then on rw dev the warnings returned.

dom · June 9, 2021, 9:47pm

Excited to try this all out. One thing I noticed was that I’m not getting any types for a Cell’s Success props:

dthyresson · June 9, 2021, 9:48pm

FYI I am having the same experience in 32.2 as well in an upgraded app.

danny · June 9, 2021, 9:57pm

Dom are you using React query? By default its only configured to pull in types if you’re using Apollo provider.

The types can totally be extended for react-query, I made sure of that, but needs a few lines added to make it work, will write up a guide for this.

dom · June 9, 2021, 10:03pm

Ah gotcha! But not using react query, just a fresh install. @dthyresson same for you?

dthyresson · June 9, 2021, 10:05pm

Am using out-of-box Apollo Client.

thedavid · June 9, 2021, 11:06pm

Probably won’t make much of a difference, but sometimes I find I need to use the VS Code command palette to Reload the Window:

cmd+shift+p on Mac. Then type “reload”, select and /enter.

ajoslin103 · June 10, 2021, 3:40am

I can’t use the Redwood IDE extension because it listens on a port I need when I develop legacy Aurelia codebases (which I’m still doing… Aurelia was great! But it’s legacy now that Redwood’s in town )

Morzaram · June 10, 2021, 5:37am

Hey guys, super new here and trying to run the yarn rwt link. Now, it’s a completely new setup so I haven’t touched/upgraded anything. Here’s some of the hard errors I’m getting:

packages/api/src/logger/index.ts:353:30 - error TS7053: Element implicitly has an 'any' type because expression of type '"_clientVersion"' can't be used to index type 'PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>'.
      Property '_clientVersion' does not exist on type 'PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>'.

353     prisma: { clientVersion: config.db['_clientVersion'] },
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/api/src/logger/index.ts:358:21 - error TS2345: Argument of type '"query"' is not assignable to parameter of type '"beforeExit"'.

358       config.db.$on(level, (queryEvent: QueryEvent) => {
                        ~~~~~

packages/api/src/logger/index.ts:372:21 - error TS2345: Argument of type '"info" | "warn" | "error"' is not assignable to parameter of type '"beforeExit"'.
  Type '"info"' is not assignable to type '"beforeExit"'.

372       config.db.$on(level, (logEvent: LogEvent) => {
                        ~~~~~

dthyresson · June 10, 2021, 9:55am

Hi @Morzaram and welcome.

We may want to put this in a new topic as it may not be TS related, but one question: I know you said a “completely new setup”, but just to clarify - what version of Redwood and what version of Prisma is currently installed? Thanks!

dthyresson · June 10, 2021, 10:40am

Update.

One cause for output to look like there were issues was that I had enabled the Jest extension.

Disabling this removed any apparently issues in tests.

This was a red herring as nothing to do with types or TS – but rather the extension was watching the file and attempting to run the test via jest but not via yarn rw test and as such wasn’t able to load mocks.

I suggest not to use that extension – I must have recently installed it in one of the those VSCode suggestions by accident and never noticed.

danny · June 10, 2021, 1:41pm

@dom, @dthyresson confirming this is an issue.

Temporary fix is to add ts-toolbelt to your project in dev dependencies

yarn add -W --dev ts-toolbelt

I’ll try and find a proper fix for this.

dthyresson · June 10, 2021, 2:04pm

@danny That works great! Thanks!

Morzaram · June 10, 2021, 3:05pm

Hey @dthyresson, what I mean was I followed the contribution guide on how to get setup and this was a fresh install.

I have 0.33.2 for redwood and prisma is a 2.24.1