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:

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.