How to pass in additional params to a data loader in Remix?

[sid2364]

I'm trying to pass in additional params to my data loader. This is a param that was passed to my component directly like this:

function TopProducts({count}) {
  const {topProducts} = useLoaderData(); //count SHOULD BE PASSED IN HERE
  return <ProductCards products={topProducts.nodes} />;
}

My data loader is a simple one:

export async function loader({params, context}) {
  const {topProducts} = await context.storefront.query(TOP_PRODUCTS_QUERY, {
    variables: {
      handle: params.handle,
      country: context.storefront.i18n.country,
      language: context.storefront.i18n.language,
      count, // THIS count IS CURRENTLY MISSING FROM THIS LOADER
    },
  });

  return json({topProducts});
}

TOP_PRODUCTS_QUERY is a graphQL query where "$count" is referenced.

How do I pass this variable through?

[blittle]

Hi @sid2364, loaders execute before your component renders, so you cannot pass data from the component directly to the loader. This is because the components get rendered on the server (SSR), so all data needs to be fetched up front in the loaders before the page can SSR. Loaders should load data based on the request, which includes the URL and parameters within it (and cookies).

I'm not entirely sure what you are trying to accomplish with this count variable. If it doesn't make sense for it to be in the URL (?count=1 or something like that), you could create a resource route, which is essentially a route that has a loader and no UI. And then you can use useFetcher() to call the resource route with count as a part of the request body.