What you’ll learn
  • how to upgrade Webiny from 5.6.0 to 5.7.0

Before continuing, make sure to take the necessary precautions, listed in the Overview section.

Make sure to check out the 5.7.0 changelog to get familiar with all the changes introduced in this release.

Upgrade Webiny Packages
anchor

The first step is to upgrade all @webiny/* packages, which can be done by running the following command in the root of your project:

Once the packages upgrade has finished, running the yarn webiny --version command in your terminal should return 5.7.0.

Upgrade Lambda Handlers
anchor

In order to benefit from the new API Error Overlay feature, we need to add some tweaks to the configuration of our Lambda handlers.

graphqlLambda Handler
anchor

In your api/code/graphql/src/index.ts file, add a debug variable and modify the call to createHandler to use a configuration object:

api/code/graphql/src/index.ts

Also change the graphqlPlugins({ debug: process.env.DEBUG }) to graphqlPlugins({ debug }), as we’re now very strict about the type of debug parameter (it now has to be a boolean). That’s why we explicitly define that variable once, and reuse it where needed.

As you can see, we now use a configuration object to explicitly pass plugins and other parameters required by the Lambda handler factory package. The http: { debug } will be passed all the way to the internal @webiny/handler-httpexternal link package which will handle the errors for us.

NOT SURE WHAT TO DO?

If unsure what the final result should look like, please see the original fileexternal link for a complete example.

headlessCMSLambda Handler
anchor

The same change applies to headlessCMS Lambda. In your api/code/headlessCMS/src/index.ts file, add a debug variable and modify the call to createHandler to use a configuration object:

api/code/headlessCMS/src/index.ts
NOT SURE WHAT TO DO?

If unsure what the final result should look like, please see the original fileexternal link for a complete example.

Upgrade React Applications
anchor

UpgradeadminApplication
anchor

Open your apps/admin/code/src/components/apolloClient.ts file and replace everything with the following:

apps/admin/code/src/components/apolloClient.ts

The important parts are highlighted in the code. We replaced all custom Apollo links with a single ApolloDynamicLink to handle everything via plugins.

Now we need to register those links we just removed using plugins.

Create a file apps/admin/code/src/plugins/apolloLinks.ts and paste the following into it:

apps/admin/code/src/plugins/apolloLinks.ts

Now we just need to import this new file to register them with the application. Open apps/admin/code/src/plugins/index.ts, import the new plugins, and register them:

apps/admin/code/src/plugins/index.ts

UpgradewebsiteApplication
anchor

Open apps/website/code/src/components/apolloClient.ts and replace everything with the following code:

apps/website/code/src/components/apolloClient.ts

Lastly, open apps/website/code/src/plugins/apolloLinks.ts and replace everything with the following code:

apps/website/code/src/plugins/apolloLinks.ts

Redeploy!
anchor

Now you’re ready to redeploy your API and apps. By now, you’re most likely familiar with the deployment process, but if you need a refresher, visit our Deploy Your Project guide for everything related to deployments.