# Making API Requests in Remix Supabase

> Learn how to make requests to your Remix API in Makerkit

*Canonical: https://makerkit.dev/docs/remix-supabase/data-fetching/making-api-requests*

---

Normally, Remix encourages you to colocate actions/loaders within the page where they are used. 

However, sometimes you may want to make a request to your API from a different page, or from a component that is not colocated with the API. This can be the case when the same action is used in multiple places, or when you want to make a reusable component that can be used in multiple places. 

In these cases, the recommended approach is to add your API routes under `routes/resources`. For example, the Stripe webhooks are added under `routes/resources/stripe`.

## Executing API requests with Remix

To make a request to your API, we recommend using one of the Remix data-fetching utilities, such as `Form`, `useFetcher`, or `useSubmit`. 

These are meant to work seamlessly with Remix's data-fetching utilities and will perform some optimizations like automatic cancellation of requests when the component unmounts, and automatic data re-fetching for the layouts that the page is using.

## Data Fetching

Let's see a simple example of using `useFetcher` to make a request to our API. First, we define a loader function that fetches some data and returns it:

 ```tsx {% title="app/resources/users.ts" %}
export async function loader() {
  const users = await loadUser();

  return json({ users });
}
```

At this point, you have various options for how to use this loader function. 

You can use a `fetch` call to make the request, or you can use one of the Remix data-fetching utilities, such as `useFetcher`.