Redwood v0.35: dbAuth, Envelop GraphQL, React Helmet

Announcements Releases and Upgrade Guides
1

v0.35 Highlights :tada:

Current release version is v0.35.2

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

:email: Envelop/Helix GraphQL Server (preview)

This feature is in preview. We need your help with testing and feedback!

Over the last two months, @dotansimha from The Guild along with assistance from certified Redwood Whisperer @dthyresson have been working on allowing Redwood users to migrate away from Apollo Server to a different GraphQL server. This is now available now for you to try and let us know your experience!

:closed_lock_with_key: Self-hosted Auth with dbAuth

An alternative to third-party authentication has finally come, thanks to @cannikin. We call it dbAuth.

You store your own credentials, log in your own users (for as long or as little time as you want), and it requires no third party integration. Your app stays self-contained, fast, and awesome.

:tophat: <head>s up! New SEO and metatag support

Redwood now gives you built in ways to modify the HTML <head> and metatags on your pages, for better SEO and social cards when links are unfurled. Note: please see the “Code Modification” section below for how to upgrade your app to use this feature.

:closed_lock_with_key:GraphQL Logger and Security

This release includes significant improvements to Redwood’s GraphQL implementation. In addition to the new GraphQL logging capability, there are new security configuration defaults and options such as Query Depth Limit and disabled introspection in production.

Changelog

Added

Changed

Fixed

Package Dependencies

View all Dependency Version Upgrades
  • misc dependabot updates week of July 5th (#2982) 99da9dbe @thedavidprice

Breaking :warning:

1. Fully Deprecated <Flash> component

In Redwood v0.27, the Flash component was replaced with React Hot Toast and scheduled for deprecation. In this release, <Flash />has been fully removed. Components that import <Flash /> will error.

Search your project’s codebase for “Flash”, which was used in the Scaffold generator as well as custom implementation. If there are any occurrences, you can replace Flash with Toast via this guide:

2. whileLoading replaced with whileLoadingAuth

The whileLoading prop has been renamed whileLoadingAuth, which you can pass to routes to be a little bit more specific.

If your project includes an implementation of whileLoading, it will need to be replaced. See “Code Modifications” section below.

3. Changes to Apollo Server Plugins and validationRules

This release includes major improvements to Redwood’s GraphQL Server, including a new logger and added security by default. (See PR #2914.)

Most of the changes to Apollo Server plugins and validationRules build upon previously existing options. However, if your project already includes defined plugins or validationRules, they will be overwritten. See the following docs for more information:

4. Custom ContextFunction Changes

If you use a custom ContextFunction to modify the context in the createGraphQL handler, now the function is provided only the context and not also the event. However, the event information is available as an attribute of the context as context.event.

Therefore, your custom ContextFunction setIpAddress() accessed the event as in:

const ipAddress = ({ event }) => {
  return (
    event?.headers?.['client-ip'] ||
    event?.requestContext?.identity?.sourceIp ||
    'localhost'
  )
}

const setIpAddress = async ({ event, context }) => {
  context.ipAddress = ipAddress({ event })
}

with envelop, you would use simple get the event from the context:


const setIpAddress = async ({ context }) => {
  context.ipAddress = ipAddress({ event: context.event })
}

How to Upgrade

Code Modifications

1. Add GraphQL Logger

This is an optional but highly recommended modification.

The createGraphQLHandler now takes a loggerConfig that contains an instance of the app’s defined logger and a set of options that define what to log. Update the file api/src/functions/graphql.js|ts (see reference file):

// api/src/functions/graphql.js|ts
...

+ import { logger } from 'src/lib/logger'

export const handler = createGraphQLHandler({
+  loggerConfig: { logger, options: {} },
  schema: makeMergedSchema({
    schemas,
    services: makeServices({ services }),
  }),
  onException: () => {
    // Disconnect from your database with an unhandled exception.
    db.$disconnect()
  },
})

All the loggerConfig options are documented in Redwood’s Graphql Docs

2. Change any custom ContextFunctions in GraphQL handler

If your custom ContextFunction access the event, rework the function to access the event from the context as in:

const event = context.event
// use event as before ...

See Custom ContextFunction Changes above.

We’ve renamed the whileLoading prop to whileLoadingAuth, which you can pass to routes to be a little bit more specific. Redwood router now supports two different loaders that you can set right from your Routes.js|ts. More details here:

If your project includes an instance of whileLoading, updating is as as simple as renaming whileLoading to whileLoadingAuth. Example:

// Routes.js|tsx

- <Private whileLoading={SkeletonLoader}>
+ <Private whileLoadingAuth={SkeletonLoader}>
		<Route1>
		<Route2>
	</Private>

3. :newspaper_roll: Wrap your App in <RedwoodProvider> for React Helmet and SEO <Head> support

This is an optional but highly recommended modification.

To use the new <Head> for React Helmet meta and SEO, you need to make sure the RedwoodProvider wraps your entire App. Make the following changes in web/src/App.js/tsx (see reference file):

- import { FatalErrorBoundary } from '@redwoodjs/web'
+ import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'

  <FatalErrorBoundary page={FatalErrorPage}>
+    <RedwoodProvider>
        <AuthProvider client={...} type="..."> {/* may not exist for apps without Auth */}
          <RedwoodApolloProvider>
            <Routes />
          </RedwoodApolloProvider>
        </AuthProvider> {/* may not exist for apps without Auth */}
+    </RedwoodProvider>
  </FatalErrorBoundary>

Upgrade Packages to v0.35.x from v0.34.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

Amazing job team and huge thanks to @dotansimha for putting so much work, attention, and care into this.

1 Like
3

Small update to the Release Note about using custom Context Function in your GraphQL handler if you migrate to use graphql-server and Helix/Envelop.

4

Patch Release v0.35.1

Patch release including the following fixes:

  • yarn rwfw contributing command: introduce a new approach to syncing Redwood framework with Redwood project #2963 by @peterp
  • Don’t pass undefined name to RHF get() #3038 by @Tobbe
  • Fix issue where generate scaffold would crash if using double quotes #3040 by @zackdotcomputer
1 Like
5

Patch Release v0.35.2

Includes the following fixes:

2 Likes