Skip to main content

API

Marblism uses tRPC for its API implementation, providing a type-safe and efficient way to handle server-client communication.

tRPC Setup​

The API uses tRPC, with app/routes/api.trpc.$.tsx serving as the HTTP route that proxies the tRPC client to the tRPC server.

Model Interactions​

All model interactions are auto-generated with ZenStack in the app/core/.marblism/zenstack directory. These files should not be modified directly, as the source of truth is the model definition. To generate or update these files, use the following command:

pnpm run crud:sync

tRPC Server and Custom Logic​

The tRPC server is exposed in app/core/trpc/server/index.tsx. This file is also where custom functions from plugins are imported. Users can add their own custom backend logic in this file to expose additional functionality through the API.

Classic HTTP Endpoints​

While tRPC is the primary method for API interactions, classic HTTP endpoints can still be declared using Remix loaders and actions. Refer to the official Remix documentation for more information on how to implement these endpoints.

Using the API in Pages​

The Api object from @/core/trpc can be used in the pages to interact with the API. It's a tRPC client integrated with Tanstack React Query, providing a seamless way to fetch and manage data in your React components.

Here's an example of how to use the Api object to query for users with an 'INVITED' status:

const { data } = Api.users.findMany.useQuery({ where: { status: 'INVITED' } });

This query will fetch all users with the 'INVITED' status, and the result will be available in the data variable. The useQuery hook from Tanstack React Query is used here, providing automatic caching, refetching, and other powerful features out of the box.