Use API in application

Learn how to fetch data from your API in your supastarter 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,
  });
 
}

Use API in application

Use API in a client component

Use API in a server component

On this page