Pastoria

GraphQL-integrated Router

Define routes using simple JSDoc annotations. Pastoria generates type-safe routing code automatically, giving you full IDE autocomplete and type checking without manual configuration.

/** @route /users/:userId */
export const UserPage: EntryPointComponent<
  { userQuery: UserQuery }, {}
> = ({ queries }) => {
  // Queries are loaded on the server during SSR,
  // subsequent navigations suspend the page.
  const { user } = usePreloadedQuery(graphql`
    query UserQuery($userId: String!) {
      user(id: $userId) {
        ...user_UserCard
      }
    }
  `, queries.userQuery);

  // Type-safe data fetching using Relay.
  return (
    <>
      Hello {user.name}!
      <UserCard user={user} />
    </>
  );
};

Type-safe Navigation and Routing

Built on React Relay for efficient data fetching with automatic query optimization, persisted queries, and seamless server-side rendering. Queries are preloaded on the server and hydrated on the client.

function UserCard(props: { user: user_UserCard$key }) {
  const user = useFragment(
    graphql`fragment user_UserCard on User {
      id
      name
    }`,
    props.user
  );

  return (
    <RouteLink route="/users/:userId" params={{ userId: userId }}>
      {user.name}
    </RouteLink>
  );
}

Unified Code Generation

Server-side rendering out of the box with automatic code splitting and lazy loading. Run pastoria gen to generate your router, then pastoria dev to start developing with hot module replacement.

# Generate GraphQL queries and router
$ pastoria make

# Start dev server backed by Vite
$ pastoria dev

# Build for production
$ pastoria make --release

# Deploy with the standalone server
$ pastoria-server