Skip to main content
Version: Next

Client Config

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

main.wasp.ts
import { app } from "@wasp.sh/spec"
import Root from "./src/Root" with { type: "ref" }
import mySetupFunction from "./src/myClientSetupCode" with { type: "ref" }

export default app({
  name: "MyApp",
  client: {
    rootComponent: Root,
    setupFn: mySetupFunction,
  },
  // ...
})

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:

main.wasp.ts
import { app } from "@wasp.sh/spec"
import Root from "./src/Root" with { type: "ref" }

export default app({
  name: "MyApp",
  client: {
    rootComponent: Root,
  },
  // ...
})
src/Root.jsx
import { Outlet } from "react-router"

export default function Root() {
  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 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:

main.wasp.ts
import { app } from "@wasp.sh/spec"
import Root from "./src/Root" with { type: "ref" }

export default app({
  name: "MyApp",
  client: {
    rootComponent: Root,
  },
  // ...
})
src/Root.jsx
import { Outlet } from "react-router"
import store from "./store"
import { Provider } from "react-redux"

export default function Root() {
  return (
    <Provider store={store}>
      <Outlet />
    </Provider>
  )
}

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

For the full description of the rootComponent field, check the Client 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:

src/myClientSetupCode.js
export default async function mySetupFunction() {
  let count = 1
  setInterval(
    () => console.log(`You have been online for ${count++} hours.`),
    1000 * 60 * 60
  )
}

Overriding Default Behaviour for Queries​

info

You can change the options for a single Query using the options object, as described here.

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:

src/myClientSetupCode.js
import { configureQueryClient } from "wasp/client/operations"

export default async function mySetupFunction() {
  // ... 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.

For the full description of the setupFn field, check the Client API Reference.

Base Directory​

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

main.wasp.ts
import { app } from "@wasp.sh/spec"

export default app({
  name: "MyApp",
  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.

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.

API Reference​

API reference

Client »

All the options for the client field of the app spec.