Multiple loaders on one component - Load API on demand

[StMartins1]

I've set up access to an external API to which I submit data and get a response. However I only want to do this on button click and not on load.  

https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/third-party 

I already have the below loader in place to fetch a list of products;

export async function loader({context}) {
  
  return await context.storefront.query(Products);
}

This is the additional loader I would like to use for my API request:

// Fetch and return API data with a Remix loader function
export async function loader({context}) {
  const id = await context.mycustom.query(CUSTOM_QUERY, {
    cache: CacheShort(),
  });
  return json({id});
}

 However I can't use more than one of these loaders in the route at the same time but also want to only use the second one on demand.

Any help is much appreciated! Trying to work out the approach I need to take. Is it a case of taking my API call out to a seperate route?

[jamalsoueidan]

Loader only loads when the page loads.

You need to use action if you need to handle it on button.

in your component you would use

const data = useActionData();