Migration from 0.14.X to 0.15.X

What's new in 0.15.0?

Wasp 0.15.0 brings upgrades to some of Wasp's most important dependencies. Let's see what's new.

Prisma 5

Wasp is now using the latest Prisma 5, which brings a lot of performance improvements and new features.

From the Prisma docs:

Prisma ORM 5.0.0 introduces a number of changes, including the usage of our new JSON Protocol, which make Prisma Client faster by default.

This means that your Wasp app will be faster and more reliable with the new Prisma 5 version.

React Router 6

Wasp also upgraded its React Router version from 5.3.4 to 6.26.2. This means that we are now using the latest React Router version, which brings us up to speed and opens up new possibilities for Wasp e.g. potentially using loaders and actions in the future.

There are some breaking changes in React Router 6, so you will need to update your app to use the new hooks and components.

How to migrate?

To migrate your Wasp app from 0.14.X to 0.15.X, follow these steps:

1. Bump the Wasp version

Update the version field in your Wasp file to ^0.15.0:

main.wasp

app MyApp {
  wasp: {
    version: "^0.15.0"
  },
}

2. Update the package.json file

1. Update the prisma version in your package.json file to 5.19.1, and add "type": "module" to the top level:

   package.json

   {
     ...
     "type": "module",
     "dependencies": {
       ....
       "prisma": "5.19.1"
     }
     ...
   }

2. If you have @types/react-router-dom in your package.json, you can remove it as it is no longer needed.

3. Use the latest React Router APIs

Update the usage of the old React Router 5 APIs to the new React Router 6 APIs:

1. If you used the useHistory() hook, you should now use the useNavigate() hook.

   Before

   src/SomePage.tsx

   import { useHistory } from 'react-router-dom'
   
   export function SomePage() {
     const history = useHistory()
     const handleClick = () => {
       history.push('/new-route')
     }
     return <button onClick={handleClick}>Go to new route</button>
   }

   After

   src/SomePage.tsx

   import { useNavigate } from 'react-router-dom'
   
   export function SomePage() {
     const navigate = useNavigate()
     const handleClick = () => {
       navigate('/new-route')
     }
     return <button onClick={handleClick}>Go to new route</button>
   }

   Check the React Router 6 docs for more information on the useNavigate() hook.

2. If you used the <Redirect /> component, you should now use the <Navigate /> component.

   The default behaviour changed from replace to push in v6, so if you want to keep the old behaviour, you should add the replace prop.

   Before

   src/SomePage.tsx

   import { Redirect } from 'react-router-dom'
   
   export function SomePage() {
     return (
       <Redirect to="/new-route" />
     )
   }

   After

   src/SomePage.tsx

   import { Navigate } from 'react-router-dom'
   
   export function SomePage() {
     return (
       <Navigate to="/new-route" replace />
     )
   }

   Check the React Router 6 docs for more information on the <Navigate /> component.

3. If you accessed the route params using props.match.params, you should now use the useParams() hook.

   Before

   src/SomePage.tsx

   import { RouteComponentProps } from 'react-router-dom'
   
   export function SomePage(props: RouteComponentProps) {
     const { id } = props.match.params
     return (
       <div>
         <h1>Item {id}</h1>
       </div>
     )
   }

   After

   src/SomePage.tsx

   import { useParams } from 'react-router-dom'
   
   export function SomePage() {
     const { id } = useParams()
     return (
       <div>
         <h1>Item {id}</h1>
       </div>
     )
   }

   Check the React Router 6 docs for more information on the useParams() hook.

4. If you used the <NavLink /> component and its isActive prop to set the active link state, you should now set the className prop directly.

   Before

   src/SomePage.tsx

   import { NavLink } from 'react-router-dom'
   
   export function SomePage() {
     return (
       <NavLink
         to="/new-route"
         isActive={(_match, location) => {
           return location.pathname === '/new-route'
         }}
         className={(isActive) =>
           cn('text-blue-500', {
             underline: isActive,
           })
         }
       >
         Go to new route
       </NavLink>
     )
   }

   After

   src/SomePage.tsx

   import { NavLink, useLocation } from 'react-router-dom'
   
   export function SomePage() {
     const location = useLocation()
     return (
       <NavLink
         to="/new-route"
         className={() =>
           cn('text-blue-500', {
             underline: location.pathname === '/new-route',
           })
         }
       >
         Go to new route
       </NavLink>
     )
   }

   Check the React Router 6 docs for more information on the <NavLink /> component.

4. Update your root component

The client.rootComponent now requires rendering <Outlet /> instead the children prop.

Before

main.wasp

app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import { App } from "@src/App.tsx",
  }
}

src/App.tsx

export function App({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}

After

main.wasp

app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import { App } from "@src/App.tsx",
  }
}

src/App.tsx

import { Outlet } from 'react-router-dom'

export function App() {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      <Outlet />
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}

That's it!

You should now be able to run your app with the new Wasp 0.15.0.