Redwood v0.34: TypeScript Support hits đź’Ż

Announcements Releases and Upgrade Guides
1

current release is v0.34.1

v0.34 Highlights :tada:

This release includes 47 PRs by 13 contributors (not including even more contributors working on Docs and Tutorial translations). To each of you who are working hard to make this project so amazing, we thank you! :raised_hands:

This also brings us a couple releases shy of a v1.0.0 release candidate. :exploding_head: We’ve made a list of the remaining features and breaking changes, which you can follow via the Current Release Sprint project board on GitHub. Once we burn down the columns “On deck” and “In Progress”, it’ll be time. And we need your help! Look for open Issues in the “On deck” column as well as having a label v1/priority. Everyone is invited to become a Redwood contributor. If you’re not sure how to get started, check out the #contributing channels on our Forums and Chat. And keep a lookout for the next Contributing Workshop in a few weeks.

:rocket: TypeScript Support reaches :100:

TypeScript fans, your day has come! Thanks to a massive effort by so many of our own RedwoodHeroes™, both JS and TS projects will now get type coverage from the Router to Cells to API to Web to you-name-it.

To spin up a new project with the TS language target (also including generators):

  • yarn create redwood-app [directory] --typescript

Have an existing JS project you want to convert to TS (or run hybrid)? We have you covered:

  1. run the command yarn redwood setup tsconfig
  2. change files to .ts or .tsx as required

Lastly, we need your feedback and help to iron out any bugs and add the final touches. Just drop in on the forum conversation over here.

:loudspeaker: Bienvenido a Redwood Tutorial

Thanks to the work of @pdjota (and others), the Redwood Tutorial part 1 is now fully translated to Spanish!

If you are interested in helping translate into French, Spanish, Portuguese, or Italian, check out this translation guide and come say “hi!” in the on #tutorial-localization Discord channel

The amazing translation project is all due to the hard work of @clairefro Thanks for helping make Redwood even more amazing, Claire!

Changelog

Added

  • TS: adds generate gql types to gitignore #2848 by @dac09
  • TS: add more filles to ignore in dev-server. #2840 by @peterp
  • TS: split GraphQL type-def generation. #2839 by @peterp
  • TS: create ResolverArgs type. #2819 by @peterp
  • TS: add rw typeCheck command #2812 by @dac09
  • TS: adds some minor polish to the TS to JS command #2786 by @orta
  • TS: add graphql AST helpers | Generate cell input props #2756 by @jtoar
  • TS: make “ts” flag on e2e match create-redwood-app. #2709 by @peterp
  • CLI: add --cwd option to CLI. #2818 by @peterp
  • Ops: adds cypress tests api-side logging as part of e2e #2798 by @dthyresson
  • Ops: add action for updating PR milestone #2635 by @jtoar
  • Deploy: support RedwoodJS framework detection with Netlify CLI #2712 by @dthyresson
  • CLI: rw test add db-push flag #2642 by @pachoclo

Changed

Fixed

Package Dependencies

View all Dependency Version Upgrades

Breaking :warning:

Jest Configuration

Redwood’s internal packages went through a major restructuring project in #2769. Most changes are invisible. However, Jest configuration had a breaking change that requires a SuperSimple™ code modification. See the “How to Upgrade” section below

Scaffold Generator Directory Structure

It has been possible to use a directory structure when running yarn redwood generate scaffold <path/model>. In PR #2613, the default behavior changed to always include generated directories within a top-level directory named after the model. For example, if your model name is “post”, all your post CRUD components will reside in Post/. You can disable this new default behavior via config. NOTE: the related destroy scaffold command will run according to whichever setting you use, either the new default or the config override.

redwood.toml config to disable the new default:

[generate]
  nestScaffoldByModel= false

New Cell Updating: defaults to SWR

By default, Cells are now SWR (stale while revalidate). This means that once a Cell renders Success (meaning there’s data in the cache), when it refetches its query, it’ll still show Success. It won’t change to Loading then back to Success, but show stale data instead till the query comes back.

The reason for this change was that it’s more in-line with our default fetch policy, cache-and-network, and was the behavior we had prior to Apollo v3. cache and network will return data from the cache and send a network request. This caused Cells to render Loading no matter what — whether or not there was data in the cache. Now, this is no longer the case.

The fact that a Cell is refetching its query is useful to know, so the Success component now gets an extra prop, updating, which you can use to display something like a spinner:

export const Success = ({ updating }) => {
  return (
    <>
      // your Success render...
      {updating && <Spinner>}
    </>
  )
}

Note that you can opt-out of this behavior by changing your fetch policy to something like network-only or no-cache in beforeQuery:

export const beforeQuery = (props) => {
  return {
    variables: props,
    fetchPolicy: 'network-only'
  }
}

How to Upgrade

Code Modifications

1. Modify Jest Config

Update api/jest.config.js (see reference file):

- const { getConfig } = require('@redwoodjs/core')
- 
- const config = getConfig({ type: 'jest', target: 'browser' })
- config.displayName.name = 'api'
- 
- module.exports = config
+ module.exports = require('@redwoodjs/testing/config/jest/api')

Update web/jest.config.js (see reference file):

- const { getConfig } = require('@redwoodjs/core')
- 
- const config = getConfig({ type: 'jest', target: 'browser' })
- config.displayName.name = 'web'
- 
- module.exports = config
+ module.exports = require('@redwoodjs/testing/config/jest/web')

2. Remove @redwoodjs/api-server

The main API package now includes the api-server package. See #2769

It’s not required, but we recommend removing it from api/package.json:

-    "@redwoodjs/api": "^0.34.0",
-    "@redwoodjs/api-server": "^0.34.0"
+    "@redwoodjs/api": "^0.34.0"

3. Ignore new TS directories api/types and web/types

In PR #2848, projects ignore these directories by default.

Add the following lines to your .gitignore:

web/types/graphql.d.ts
api/types/graphql.d.ts

Now remove tracking generated types from your git history. Run this command:

git rm --cached api/types/graphql.d.ts web/types/graphql.d.ts

4. Use Netlify Dev (for projects using Netlify Deployment)

Redwood now has first-class framework detection on Netlify. For full description, see #2712. This change below makes it easier to use Netlify Dev.

Modify your netlify.toml (see reference file):

[dev]
- command = "yarn rw dev"
+  # To use [Netlify Dev](https://www.netlify.com/products/dev/),
+  # install netlify-cli from https://docs.netlify.com/cli/get-started/#installation
+  # and then use netlify link https://docs.netlify.com/cli/get-started/#link-and-unlink-sites
+  # to connect your local project to a site already on Netlify
+  # then run netlify dev and our app will be accessible on the port specified below
+  framework = "redwoodjs"
+  # Set targetPort to the [web] side port as defined in redwood.toml
+  targetPort = ${config.web.port}
+  # Point your browser to this port to access your RedwoodJS app
+  port = 8888

Upgrade Packages to v0.34.x from v0.33.x

Run the following command within your App’s directory:

yarn redwood upgrade

Upgrading from an earlier version?

Please follow the “how to upgrade” sections for each newer version here :point_right: Releases · redwoodjs/redwood · GitHub, as there may be manual code mods needed for each version.

Upgrading to a version that is not the latest?

The command yarn rw upgrade will always upgrade to the latest (i.e. most recent) Redwood version. If you need to upgrade incrementally to an earlier, specific release, use the --tag option. For example, if you need to upgrade from v0.27.0 to v0.28.4, run the following command:

yarn redwood upgrade --tag 0.28.4

Need help or having trouble upgrading packages?

See this forum topic for manual upgrade instructions and general upgrade help.

Redwood Releases on GitHub

You can see all Redwood release notes and version history on GitHub

7 Likes
2

To clarify, the code here is from the template used when creating a new RW app and as such reads from your config in case you have changed the default port.

To modify an existing app when updating your netlify.toml, specify the actual port (it most likely is 8910):

  targetPort = 8910
2 Likes
3

Something you may run across while upgrading your apps to v0.34 is something I encountered with some of my cells that did the same operation and used the same name to identify them:


gen | Generating TypeScript definitions and GraphQL schemas...
api | Running at 'http://localhost:8911'
api | Watching files in '/redwoodblog-rbac/api/src/functions'
gen | Not all operations have an unique name: FIND_POST_BY_ID, DeletePostMutation
gen | Not all operations have an unique name: FIND_POST_BY_ID, DeletePostMutation

In my case, I was finding a Post and deleting a Post using the same GraphQL query but I named them the same in two separate cells:

export const QUERY = gql`
  query FIND_POST_BY_ID($id: Int!) {
    post: post(id: $id) {
      id
      createdAt
      title
      body
    }
  }
`

and

const DELETE_POST_MUTATION = gql`
  mutation DeletePostMutation($id: Int!) {
    deletePost(id: $id) {
      id
    }
  }
`

These now need unique names, so I used FIND_EDIT_POST_BY_ID and DELETE_THE_POST_MUTATION in the “other” cells where used.

4

Patch Release: v0.34.1

Includes the following fix:

  • redwood exec command: Pick up ts scripts too #2856 by @dac09
5

Thank you for clarifying. I was getting this error:

3:07:30 PM: Failed during stage 'Reading and parsing configuration files': 
When resolving config file /opt/build/repo/netlify.toml:
Could not parse configuration file
Expected "'", "'''", "+", "-", "[", "\"", "\"\"\"", "_", "false", "true", "{", [ \t] or [0-9] but "$" found.

: exit status 1
3:07:30 PM: Finished processing build request in 1m9.728258768s

but your post helped clear that up. Cheers!

1 Like