Client Config

You can configure the client using the client field inside the app declaration:

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
setupFn: importmySetupFunctionfrom"@src/myClientSetupCode"
}
}

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
setupFn: importmySetupFunctionfrom"@src/myClientSetupCode"
}
}

Root Component​

Wasp gives you the option to define a "wrapper" component for your React app.

It can be used for a variety of purposes, but the most common ones are:

• Defining a common layout for your application.
• Setting up various providers that your application needs.

Defining a Common Layout​

Let's define a common layout for your application:

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
}
}

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

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

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
}
}

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

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

You need to import the Outlet component from react-router-dom and put it where you want the current page to be rendered.

Setting up a Provider​

This is how to set up various providers that your application needs:

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
}
}

import{Outlet}from'react-router-dom'
importstorefrom'./store'
import{Provider}from'react-redux'

exportdefaultfunctionRoot(){
return(
<Providerstore={store}>
<Outlet/>
</Provider>
)
}

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
}
}

import{Outlet}from'react-router-dom'
importstorefrom'./store'
import{Provider}from'react-redux'

exportdefaultfunctionRoot(){
return(
<Providerstore={store}>
<Outlet/>
</Provider>
)
}

As long as you render the Outlet component, you can put what ever you want in the root component.

Read more about the root component in the API Reference.

Setup Function​

setupFn declares a function that Wasp executes on the client before everything else.

Running Some Code​

We can run any code we want in the setup function.

For example, here's a setup function that logs a message every hour:

exportdefaultasyncfunctionmySetupFunction(){
let count =1
setInterval(
()=>console.log(`You have been online for ${count++} hours.`),
1000*60*60
)
}

exportdefaultasyncfunctionmySetupFunction():Promise<void>{
let count =1
setInterval(
()=>console.log(`You have been online for ${count++} hours.`),
1000*60*60
)
}

Overriding Default Behaviour for Queries​

Wasp's useQuery hook uses react-query's useQuery hook under the hood. Since react-query comes configured with aggressive but sane default options, you most likely won't have to change those defaults for all Queries.

If you do need to change the global defaults, you can do so inside the client setup function.

Wasp exposes a configureQueryClient hook that lets you configure react-query's QueryClient object:

import{ configureQueryClient }from'wasp/client/operations'

exportdefaultasyncfunctionmySetupFunction(){
// ... some setup
configureQueryClient({
defaultOptions:{
queries:{
staleTime:Infinity,
},
},
})
// ... some more setup
}

import{ configureQueryClient }from'wasp/client/operations'

exportdefaultasyncfunctionmySetupFunction():Promise<void>{
// ... some setup
configureQueryClient({
 defaultOptions:{
 queries:{
 staleTime:Infinity,
},
},
})
// ... some more setup
}

Make sure to pass in an object expected by the QueryClient's constructor, as explained in react-query's docs.

Read more about the setup function in the API Reference.

Base Directory​

If you need to serve the client from a subdirectory, you can use the baseDir option:

appMyApp{
title: "My app",
// ...
client: {
baseDir: "/my-app",
}
}

This means that if you serve your app from https://example.com/my-app, the router will work correctly, and all the assets will be served from https://example.com/my-app.

API Reference​

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
setupFn: importmySetupFunctionfrom"@src/myClientSetupCode"
}
}

appMyApp{
title: "My app",
// ...
client: {
rootComponent: importRootfrom"@src/Root",
setupFn: importmySetupFunctionfrom"@src/myClientSetupCode",
baseDir: "/my-app",
}
}

Client has the following options:

• rootComponent: ExtImport​

  rootComponent defines the root component of your client application. It is expected to be a React component, and Wasp will use it as the root of the client application. It must render the Outlet component from react-router-dom to render the current page.

  Here's an example of a root component that both sets up a provider and renders a custom layout:

  • JavaScript
  • TypeScript

  src/Root.jsx

  import{Outlet}from'react-router-dom'
  importstorefrom'./store'
  import{Provider}from'react-redux'
  
  exportdefaultfunctionRoot(){
  return(
  <Providerstore={store}>
  <Layout/>
  </Provider>
  )
  }
  
  functionLayout(){
  return(
  <div>
  <header>
  <h1>My App</h1>
  </header>
  <Outlet/>
  <footer>
  <p>My App footer</p>
  </footer>
  </div>
  )
  }
  

• setupFn: ExtImport​

  You can use this function to perform any custom setup (e.g., setting up client-side periodic jobs).

  • JavaScript
  • TypeScript

  src/myClientSetupCode.js

  exportdefaultasyncfunctionmySetupFunction(){
  // Run some code
  }
  

• baseDir: String​

  If you need to serve the client from a subdirectory, you can use the baseDir option.

  If you set baseDir to /my-app for example, that will make Wasp set the basename prop of the Router to /my-app. It will also set the base option of the Vite config to /my-app.

  This means that if you serve your app from https://example.com/my-app, the router will work correctly, and all the assets will be served from https://example.com/my-app.

  Setting the correct env variable

  If you set the baseDir option, make sure that the WASP_WEB_CLIENT_URL env variable also includes that base directory.

  For example, if you are serving your app from https://example.com/my-app, the WASP_WEB_CLIENT_URL should be also set to https://example.com/my-app, and not just https://example.com.