RedwoodJS v0.20.0 🚀

Announcements Releases and Upgrade Guides
1

This is definitely a mega release! :mega: Just scroll through all the work below, contributed by so many individuals. Hats off to the active, growing Redwood community! Version v0.20.0 is amazing because of you. :rocket:

:warning: This version contains breaking changes and manual code modifications. See the “Breaking” and “Manual Code Modifications” sections below for more info and upgrade instructions.

v0.20.0 Highlights

If this version has a theme, it’s performance . Most of the highlights below are under-the-hood improvements and hard-earned fixes.

  • Improved Router Performance #1284
  • Improved GraphQL Cache Handling (Apollo) #1250 #1387 #1342
  • Improved TypeScript Support for Web #1232 #1241 #1247 #1291
  • Added Setup Command for one-step install and config and install #1154 #1234 #1269 #1282 #1294
    • after upgrading, run yarn redwood setup --help to see current commands
  • Fixed Jest Test Command #1376
  • Fixed Storybook Command on Windows #1324

Additionally, a huge Thank You to everyone who contributed to documentation on redwoodjs.com. :star_struck:

Changed

Added

Fixed

Breaking :warning:

Appollo Client v3 Cache Behavior for GraphQL Mutations

Prior to this version, Redwood Cells used Apollo’s cache and network fetch policy. This has been removed in favor of the default policy (see #1250). This change, along with the new Apollo v3 behavior, changes the behavior of mutations — state changes will often not render without a page reload.

From the ApolloDocs: If a mutation modifies multiple entities, or if it creates or deletes entities, the Apollo Client cache is not automatically updated to reflect the result of the mutation.

tl;dr : if things with your App’s CRUD rendering seem broken after upgrading, you’ll need to update the Mutations in your components to use Apollo’s new features like refetchQueries :

  • See this Apollo Doc about Mutations and Cache
  • For a more advanced approach and example using inMemoryCache , see this Forum Topic by @jtoar
  • Redwood Scaffold generated CRUD will also need to be updated. See the “Manual Code Modifications” section below.

Prisma Query Engine Deploy Error

Prisma v2.9.0 now requires setting an additional binaryTarget in schema.prisma . Otherwise, the Prisma query engine will not build correctly, resulting in an error affecting the production deploy.

  • See the “Manual Code Modifications” section below for required changes

How to upgrade RedwoodJS to v0.20.0

:point_right: IMPORTANT: Skipping versions when upgrading is not recommended and will likely cause problems. Do read through all Release Notes between your current version and this latest version. Each minor release will likely require you to implement breaking change fixes and apply manual code modifications.

Manual Code Modifications

  1. Prisma v2.9 requires an additional binaryTarget for production deploys to build correctly:
    • add the additional binaryTarget "rhel-openssl-1.0.x" to api/prisma/schema.prisma
    • see this example
  2. VS Code GraphQL extension required config:
  3. Update Scaffold generated Component files (or, in some cases, your own custom mutation implementations)
    • Redwood Scaffold generated CRUD needs to be updated in order to work with the new Apollo v3 Cache. There are four generated component files that need to be updated for each generated Scaffold. The specific names will be different based on your schema models. For the Tutorial post model as an example, the files to update are the components /Post/Post.js , /Posts/Posts.js , /NewPost/NewPost.js , and /EditPostCell/EditPostCell.js
    • Note: One way to handle this is to re-run Scaffold Generator with the --force option. :rotating_light: It’s the fastest. But this will overwrite any customization.
    • Edit [Model].js, [Model]s.js, and New[Model].js Components (e.g. Post.js, Posts.js, and NewPost.js):
      • See the three files in this commit for reference. Note: the reference file are Name.js.template , Names.js.template , and NewName.js.template
      • For each file, add import { QUERY } from 'src/components/${pluralPascalName}Cell'
      • For the respective DELETE and CREATE mutation’s onCompleted property, add refetchQueries: [{ query: QUERY }], awaitRefetchQueries: true,
      • For the [Model]s.js file, remove the current refetchQueries property from the onDeleteClick conditional
    • Edit the Edit[Model]Cell.js Component (e.g. EditPostCell.js):
      • See the EditNameCell.js.template file in this commit for reference
      • The UPDATE mutation requires passing all properties, not just id in the same manner as the QUERY
      • Add all QUERY properties (e.g. id , title , body , createdAt ) to the UPDATE_[Model]_MUTATION

Upgrading is worth it! And, more importantly, there’s a vibrant community for help (and encouragement) if you need it.

  • Have questions or need help upgrading? Check out this Forum Topic.
  • We’re evaluating how to handle the Redwood Client GraphQL. Check out this Forum Topic to learn more and share your experience and suggestions.

Upgrade Packages

Run the following command within your App directory:

yarn rw upgrade

To run the upgrade command, your project must be using v0.6.0 or greater. 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

10 Likes
3

Successfully upgraded on my own project :tada:. Re-running the scaffold generator (using --force) for each of the models was smooth sailing. Don’t forget if you’re using @relation in your schema you’ll need to modify again as per https://redwoodjs.com/docs/schema-relations. Thanks for all the work that’s gone into this version! :raised_hands:

6 Likes
4

@hamishirving thanks for the great update. And welcome to the community!