Vulcan.js 1.13: Introducing Apollo Client/Server 2 & React Router 4

Catching up with the ecosystem

What’s New

• Apollo Client 2.x
• Apollo Server 2.x
• React Router 4.x

How to Update Vulcan

• Normal install: meteor update
• 2-repo install: git pull from the Vulcan.js repo (master or devel branches).

Updating Your Packages

Apart from updating the Vulcan codebase, you’ll also need to update the NPM packages it depends on. Here’s an overview of what’s new and what needs to be updated.

Package Update Script

You can update all your NPM packages by 1) copying the Vulcan-Starter package.json file into .vulcan/package.json and 2) running the following command from your app’s directory:

• meteor npm run update-package-json

Note: if the script is not available, add the following line to your package.json file’s script block:

"update-package-json": "node ./.vulcan/update_package.js"

And put the following script in a .vulcan directory at the root of your app. You’ll also need to install the @userfrosting/merge-package-dependencies and diff npm packages.

Learn more about the update script here; or, read on for manual update instructions.

New Packages

• graphql-voyager: an API explorer for GraphQL.
• apollo-server: now required in addition to apollo-server-express.
• apollo-cache-inmemory: Apollo caching package.
• apollo-link-schema: Apollo schema package.
• apollo-link-state: Apollo package used for managing local client state.
• apollo-link-error: Apollo error package.
• react-router-dom: contains the DOM-related parts of React Router 4.
• apollo-link-watched-mutation: Third-party Apollo plugin for easier store updating.
• apollo-link-http: Apollo HTTP requests.
• qs: querystring utility (used with React Router).

Install all of them with:

npm install graphql-voyager apollo-server apollo-cache-inmemory apollo-link-schema apollo-link-state apollo-link-error react-router-dom apollo-link-watched-mutation apollo-link-http qs --save

Updated Packages

• apollo-client
• apollo-server-express
• graphql
• react-apollo
• react-router
• react-bootstrap
• react-router-bootstrap
• body-parser
• express

Update all of them with:

npm install apollo-client apollo-server-express graphql react-apollo react-router react-bootstrap react-router-bootstrap body-parser express --save

If you have any doubts, we recommend referencing the starter repo’s package.json file.

General Troubleshooting

Some general tips you can try if you run into trouble while updating.

• Delete your .meteor/versions file, then check that it’s using the latest version available for Vulcan packages (1.13)
• Delete your node_modules directory and then run yarn or npm install again.
• If Meteor complains about a missing package even though you specified the dependency, run meteor add vulcan:foo to install it manually.

Other Changes

React Router 4

React Router 4 introduces a few breaking changes. Here’s a partial list:

• The <Link> component is now imported from react-router-dom.
• props.location.query doesn’t exist anymore, it’s been replaced with props.location.search, which is a string that needs to be parsed with (for example) qs.
• router.push is now history.push

Stricter Types

Booleans/Dates/etc. are no longer accepted as Strings, which may result in validation errors.