This documentation is for a legacy version of Remix Supabase. For the latest version, please visit the Remix Supabase Turbo documentation

API requests

Learn how to make requests to your Remix API in Makerkit

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.

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS