Search code examples
remix

How to pass data from hooks to loader function in Remix.js?

I am trying useFetcher hook to get a data which I need to use in my loader function. Here is how it looks;

const { customerUuid, accountUuid } = useParams();
  const accountFetcher = useFetcher();
  useEffect(() => {
    if (accountFetcher.type === 'init') {
      const itemUuid = accountFetcher.load(`/customers/${customerUuid}/accounts/${accountUuid}/?index`).itemUuid;
    }
  }, [accountFetcher]);

I need this itemUuid as a parameter in my API call in my loader function but could not figure out how to pass it to loader or get it inside loader. Would appreciate if anyone can explain if I am skipping something or if it is even possible.

The only solution I came up with is saving this itemUuid in the local state and passing it to an input field in order to get it with the formData but this does not make sense since i need the itemUuid on the page load.

Solution

  • Where does this itemUuid come from, and how does your routing look like? If you can write your app's routing so that the itemUuid is part of the params, just like customerUuid and accountUuid, you can try naming this route as something like:

    app/routes/customers/$customerUuid/accounts/$accountId/$itemUuid

    If the itemUuid is not part of the URL, it is not really part of the initial GET to the server. Might be worth taking another look at the data-loading docs as well:

    https://remix.run/docs/en/v1/guides/data-loading#route-params