Use API in application

To query this endpoint from your application in a type-safe way, you can use the apiClient in your Next.js application.

Use API in a client component

import { apiClient } from "@shared/lib/api-client";
 
const response = await apiClient.posts.$get();
 
if (!response.ok) {
	throw new Error("Failed to fetch posts");
}
 
const posts = await response.json();

You can use the apiClient directly in a useEffect for example, but we recommend using it in combination with Tanstack Query for a better developer and user experience.

It gives you a lot of features like caching, error handling, loading states, and more.

const { data, isLoading, error } = useQuery({
	queryKey: ["posts"],
	queryFn: () => {
    const response = await apiClient.posts.$get();
 
    if (!response.ok) {
      throw new Error("Failed to fetch posts");
    }
 
    const posts = await response.json();
  }
});

You now have a fully type-safe API client that you can use in your application.

You can find many examples of how to use API endpoints with Tanstack Query in the supastarter application code. Just search for apiClient, useQuery and useMutation in the codebase.

Use API in a server component

The API client can be used in the same way in a server component, the only difference is that the cookies are not automatically attached to the request, so you need to attach them manually.

const purchases = await apiClient.payments.purchases.$get(
  {
    query: {
      organizationId,
    },
  },
  {
    headers: Object.fromEntries((await headers()).entries()),
  },
);