Redwood v0.37 🚀

Announcements Releases and Upgrade Guides
1

Current version is v0.37.5

:warning: This release has breaking changes. Please see the “Breaking” section for more info.

v0.37 Highlights :tada:

:rocket: GraphQL levels (way) up: Envelop+Helix

This release marks the official debut of @redwoodjs/graphql-server. It’s been a long time coming and we’re overjoyed to finally share it with you as Redwood’s premiere GraphQL server. You can expect can expect built-in performance, security, authentication by default, and directives. (And, oh my, you are going to :heart: directives.)

From its conception and all throughout its development we collaborated closely with The Guild. It’s an understatement to say that we couldn’t have done it without them. Infinite thanks go out to members like @dotan and @n1ru4l who have been with us every step of the way, tirelessly answering our questions and helping us make @redwoodjs/graphql-server what it is today.

To recap on why we’re so excited about this new package, see Using GraphQL Envelop+Helix in Redwood.

:control_knobs: Generator Templates

Say goodbye to having to tweak every generator just the way you want after you run it. In v0.37, you can customize all of Redwood’s generator templates to your heart’s content! Just setup the templates, make all the the edits you want there, once, and generate away. It even works for scaffolds!

:tada: New Splash Page

Redwood’s splash page got a makeover! Next time you start the dev server on a new Redwood project, you’ll be greeted with a new-look splash page that’s packed with resource cards, social links, all of your app’s routes, and, if you’re devving at night, it even has dark mode.

Huge thanks to @alicelovescake and @margalit; they spent weeks on this one from start to finish and went above and beyond responding to every piece of feedback we had. You guys rock!

:robot: Codemods

Want the latest Redwood has to offer without the hassle of upgrading? Starting with v0.37, we’ll be releasing as many codemods as we can with every Redwood release to make upgrading easier. Because of Redwood’s opinionated architecture, most codemods even find the files they have to modify themselves!

Changelog

Unique contributors: 18
PRs merged: 73

Added

Changed

  • Sunset Apollo Server and make GraphQL Helix and Envelop default graphql handler #3286 by @dthyresson @dac09 :tada:
  • Refactors graphql-server to use dedicated plug-in directory and tests #3307 by @dthyresson @dac09 :tada:
  • Update the pre-production warning to an almost-ready notice #3388 by @mojombo
  • Handle matching trailing slash #2628 by @KrisCoulson
  • Remove showUI to reduce friction fixes issue:2361 #2629 by @shahbaz17
  • Replace url and file loaders with asset modules #3293 by @jtoar
  • Use newer plugin syntax for babel-plugin-inline-react-svg #3333 by @jtoar
  • Surface errors on the api side #3353 by @Tobbe
  • dependency upgrades; graphql-tools bug fix, typescript 4.4, deprecated babel-eslint, clean up core/package.json #3371 by @thedavidprice
  • Import from specific files, not internal #3373 by @jtoar
  • Use and extend react-hook-form’s valueAs coercion #3376 by @jtoar
  • Build @redwoodjs/forms types #3387 by @jtoar
  • Refactor type generator parse method #3381 by @dac09
  • Improvements to rw exec scripts #3382 by @dac09
  • Use data previously created in the scenario as input to other scenario data #3386 by @KrisCoulson
  • extend scenario with support for scenario.only #3385 by @KrisCoulson
  • Only set dbAuth session cookie as Secure in non-development environment #3392 by @cannikin
  • rw lint - return exit code #3450 by @cjreimer
  • Rework decoders to better handle custom provider #3414 by @dthyresson
  • Updates auth related imports for graphql-server #3408 by @dthyresson
  • Better handle and log authentication and context-related exceptions within the GraphQL lifecycle #3409 by @dthyresson
  • removed lng: ‘en’ from i18n template #3465 by @realStandal

Fixed

Chore

Breaking :warning:

1. Apollo GraphQL Server removed and replaced with Helix + Envelop; Required GraphQL Directives; beforeResolverdeprecation

With this release comes a high performance, secure-by-default GraphQL Server via a new @redwoodjs/graphql-server package. Additionally, all SDL Queries and Mutations now must have a directive or both yarn rw dev and yarn rw build will fail. (Note: Apollo GraphQL Client is still used for the Web side and has not been changed.)

Directives are the new default for Secure Services, so beforeResolver will be fully deprecated in release v0.38.

Follow the code modification instructions in the “How to Upgrade” section below.

2. Recommended change for Custom Auth provider implementations

In prior releases, the custom auth decoder (or any unknown decoders) simply passed along the token as the decoded value to your application’s getCurrentUser.

This behavior has changed. (See this file change in PR #3414)

Now the custom decoder never returns a decoded token or value. Instead, when authenticating a request, it is the developer’s responsibility to use other values from getCurrentUser, e.g. token or header parameters.

tl;dr:
You must now use the token or other parameters (like headers) to authenticate. A custom decoder behaves the same way.

3. Router: paths will now match /about and /about/ by default

There is a new trailingSlashes prop added to the Router . Under the hood trailingSlashes has a default value of ‘never’. Which means /about and /about/ will now match. (Previously this would be two separate routes.) You will no longer be sent to the PageNotFound component if you have an extra slash. (See #2628)

If you need the trailingSlashes to represent two separate routes you can use trailingSlashes="preserve":

4. Tests now must be inside respective web/ and api/ src/ directories

If your tests are located outside of src/, they will no longer be included when Jest (via yarn rw test) is run. This would be an uncommon situation. (See #3303)

5. Auth Magic.link upgraded to SKD v5

Breaking change regarding “Custom session duration”, which may affect custom implementations. See Changelog and “custom session duration” PR magiclabs/magic-js#199

6. Typescript upgraded to v4.4

Do pay particular attention to type changes to catch(). We found internally that catch(error) required catch(error: any).

7. Deprecated custom Redwood Form coercion transformValue.

Redwood Form’s transformValue prop on field components is deprecated in favor of React-hook-form’s valueAs coercion (introduced in v6.12). (see PR#3376)

Follow the code modification instructions in the “How to Upgrade” section below.

8. dbAuth adds custom error message to login and signup

This release refactors the options object given to DbAuthHandler to bundle up related login and signup options together. (See #3253)

Follow the code modification instructions in the “How to Upgrade” section below.

9. Firebase Auth upgraded to v9

Firebase has been upgrade to support email link authentication. There are many related breaking changes and required code modifications. Do look through PR #3347 for more details.

And follow the code modification instructions in the “How to Upgrade” section below.

How to Upgrade

Code Modifications

:sparkles: New Automated Codemods

Many of the upgrade steps below can be completed using the new @redwoodjs/codemods package. Amazing! You’ll run the codemods using the npm subcommand npx, which allows you to run a package without needing to install either locally or globally. Here’s an example codemod you’ll run from your project root directory:

:rocket: Codemod Available

npx @redwoodjs/codemods update-graphql-function

Here are the only other things you should know in order to get the most out of this preview feature:

  1. Start by saving the current state of your project with git — there should be no uncommitted changes. This way, if you ever need to re-try or rollback a codemod step, you can easily revert using git.
  2. Always review the file changes after you run a codemod. They’re going to be accurate 90% of the time. The remaining 10% is on you.
  3. Heads up :construction_worker_man: Codemods currently work with npm v6, which is included with Node.js v14. (npx is a subcommand of the npmcommand.) If you encounter errors, you are likely using npm v7 (Node.js v16). Confirm either way by running npm --version. (Need to switch versions? Try nvm for Mac or Windows.)

Helpful Typescript Commands
These tips only apply after you have upgraded to the latest release.

You might notice type errors that don’t seem right or up-to-date. Try:

  • yarn rw g types and then
  • from the VS Code command pallete run “Developer: Reload Window”

If you see Prisma type errors, you might need to re-generate the Prisma client:

  • yarn rw prisma generate

:compass: Follow the v0.37 Upgrade Guide

The SuperOfficial™ upgrade guide will walk you through everything required to get up and running on v0.37. We’ve posted it here on the Redwood Forums — be sure to ask questions as needed and let us know how it goes:

Here’s a list of the upgrade steps included:

  1. Change imports and graphql.js handler function
  2. Enable Secure Services
  3. Update your Scenarios
  4. Update Forms
  5. Consider Modifying getCurrentUser
  6. If you use Firebase Auth
  7. If you use dbAuth

Once you’re done, don’t forget to upgrade your packages!

Upgrade Packages to v0.36.x from v0.37.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

6 Likes
2

Upgrade went fairly smooth. I did have a small hickup with auth but entirely my fault. Will add a note here just incase this trips anyone up.

If you are using auth (which most people are). Make sure to actually import and pass in getCurrentUser. The reference implementation is redwood without auth.

export const handler = createGraphQLHandler({
  loggerConfig: { logger, options: { operationName: true } },
  getCurrentUser, <--- //THIS IS VERY IMPORTANT
  directives,
  sdls,
  services,
4 Likes
4

Patch Release v0.37.3

This release requires a code modification for projects created at v0.37.2

Patch release with critical fix for webpack-cli bug:

Code Modification

Projects that started with v0.37.2 (or projects experiencing a Webpack error when running yarn rw dev) should add the following resolution to their root ./package.json:

Note: once webpack/webpack-cli#2990 is resolved, the resolution can be removed

// ./package.json

{
  "private": true,
  "workspaces": {
    "packages": [
      "api",
      "web",
      "packages/*"
    ]
  },
  "devDependencies": {
    "@redwoodjs/core": "0.37.3"
  },
  "eslintConfig": {
    "extends": "@redwoodjs/eslint-config",
    "root": true
  },
  "engines": {
    "node": "14.x",
    "yarn": "1.x"
  },
+  "resolutions": {
+    "@webpack-cli/serve": "1.5.2"
+  }
}
5

Patch release v0.37.4

Patch release with fix for yarn rw lint command, which also blocked yarn rw setup tailwind from running:

Upgrade Packages to v0.37.4 from v0.37.x

Run the following command within your App’s directory:

yarn redwood upgrade
6

I got around to upgrading and, the codemods are amazing, DX just went up a level. :clap:

I have though run into and issue related to type generation.

Running yarn rw g types gives me

/Users/kurthutten/other/redwoodblog/app/node_modules/@graphql-codegen/cli/node_modules/@graphql-codegen/plugin-helpers/index.js:500
const getCachedDocumentNodeFromSchema = utils.memoize1(utils.getDocumentNodeFromSchema);
                                              ^

TypeError: utils.memoize1 is not a function
    at Object.<anonymous> (/Users/kurthutten/other/redwoodblog/app/node_modules/@graphql-codegen/cli/node_modules/@graphql-codegen/plugin-helpers/index.js:500:47)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/kurthutten/other/redwoodblog/app/node_modules/@graphql-codegen/cli/index.js:26:23)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)

and of course this stops yarn rw build and yarn rw dev too.

I tried some usual things like yarn install --force and than nuking node_modules and it persisted.

I rummaged through node modues a little and I indeed cannot see and reference to memoize in node_modules/@graphql-tools/utils/index.js

And ideas of what to try?

(links to branch and diff)

7

@Irev-Dev Does this help? typescript-urql: utils.memoize1 is not a function ¡ Issue #6844 ¡ dotansimha/graphql-code-generator ¡ GitHub

Basically they’re saying to clean and rebuild. Probably some issue with your lock file

1 Like
8

Patch Release v0.37.5

This release resolves nine issues:

How to Upgrade

Code Modification

Projects using Redwood v0.37.3 (or v0.37.4) included a workaround in ./package.json, which resolved an upstream bug from the webpack-cli dependency. Projects no longer need to “pin” the dependency @webpack-cli/serve to 1.5.2.

If your project has the following resolution, the following change must be made in ./package.json:

// ./package.json

{
  "private": true,
  "workspaces": {
    "packages": [
      "api",
      "web",
      "packages/*"
    ]
  },
  "devDependencies": {
    "@redwoodjs/core": "0.37.3"
  },
  "eslintConfig": {
    "extends": "@redwoodjs/eslint-config",
    "root": true
  },
  "engines": {
    "node": "14.x",
    "yarn": "1.x"
+  }
-  },
-  "resolutions": {
-    "@webpack-cli/serve": "1.5.2"
-  }
}

Upgrade Packages to v0.37.5 from v0.37.x

Run the following command within your App’s directory:

yarn redwood upgrade

Troubleshooting

After making the following code modification and upgrading, you can confirm your project is using @webpack-cli/serve@1.6.0 by running yarn why @webpack-cli/serve.

Check your project by running yarn rw dev. If you encounter any errors with webpack (specifically @webpack-cli/serve), try the following steps:

  1. you can manually remove any occurrences of @webpack-cli/serve@1.5.2 from `yarn.lock, or
  2. delete your project’s ./node_modules, then run yarn -f, or
  3. if your issue does not resolve, delete ./node_modules and also delete yarn.lock. Then run yarn

If you need further help, please ask via a reply to this post.

9

Perfect, thanks @Tobbe, running 0.37 in prod now :clap: