Loader API

The Loader API is built-in by default. Use it as shown below.

HomeActivity.loader.ts

import { ActivityLoaderArgs, useLoaderData } from "@stackflow/react/future";
 
export function homeActivityLoader({ params }: ActivityLoaderArgs<"HomeActivity">) {
  return {
    // ...
  }
}

Automatically filled with types.

HomeActivity.tsx

import { homeActivityLoader } from "./HomeActivity.loader";
 
export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
  const loaderData = useLoaderData<typeof homeActivityLoader>();
}

In the stackflow.config.ts file, insert the created loader.

stackflow.config.ts

import { defineConfig } from "@stackflow/config";
import { homeActivityLoader } from "../components/HomeActivity.loader";
 
export const config = defineConfig({
  activities: [
    {
      name: "HomeActivity",
      path: "/",
      loader: homeActivityLoader,
    },
    {
      name: "MyProfileActivity",
      path: "/my-profile",
    }
  ],
  transitionDuration: 270,
});

API Changes API Pipelining