Use API in application

To call your endpoints from the frontend, you can use Tanstack Query and the orpc client, which will give you a type-safe way to call your endpoints.

Use API in a client component

import { orpc } from "@shared/lib/orpc-query-utils";

const { data, isLoading } = useQuery(orpc.posts.list.queryOptions({
  input: {
    limit: 10,
    offset: 0,
  }
}));

If you have a mutation instead of a query, you can use useMutation from Tanstack Query to call your endpoints.

const { mutateAsync, isLoading } = useMutation(orpc.posts.create.mutationOptions());

const post = await mutateAsync({
  input: {
    title: "My first post",
    content: "This is my first post",
  }
});

Use API in a server component

To fetch data from the API in a server component, you can use the orpcClient:

import { orpcClient } from "@shared/lib/orpc-client";

function ServerComponent() {
  const purchases = await orpcClient.payments.listPurchases({
    organizationId,
  });

}