Is there a way to somehow pass parameters to the loader function?

[rayrw]

Thanks for the nice work! Recently I'm experimenting the data router features but have some difficulties when implementing one of my requirements.

I know that we could set query param in the URL to somehow pass parameters to the loader function. However, I would like it not being the part of URL.

My use case is that, I'm doing pagination with the loader function, but the cursor is not ready to be put in the URL since the backend only gives me the next page's cursor and cannot return the cursor for the previous page. I would have to manually put all the previously used cursors in component state, so I would like the cursor param not to be persistent.

I have done some researches, but still cannot find a proper workaround.
Let me list some of them:

• Set up and pass a context to the router being created
  • The router is created whenever having re-render, so unexpected behavior might happen.
  • I'm not sure if I really need a context (since I just want to pass the cursor as string)
• Turn it into a POST action instead, and have the cursor in a hidden field of the form, submit it when clicking the next page button.
  • Very close to what I want and it does make the correct request, but cannot make the useLoaderData use that request's data.
  • Since I would want the list without cursor to be shown in the initial page load, is it okay to simply switch to useActionData?
• Still pass it via URL search params but somehow wipe it out in the loader function
  • Not sure if it's a good idea 😅

I would love to hear any advices to handle this. Thank you :)

[rayrw]

So far I've come up with this closest implementation, but I'm not sure if it's the correct way to achieve it.

export async function loader() {
  return await fetchList();
}

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  if (formData.has("cursor")) {
    const cursor = formData.get("cursor");
    return await fetchList(cursor);
  }
  // When there's no `cursor` (the previous page button is going to the first page), don't fetch anything and simply use loader data
  return null;
}

export const routes = [
  {
    path: "/",
    element: <ListPage />,
    loader,
    action,
    shouldRevalidate: ({ formData, defaultShouldRevalidate }) => {
      return defaultShouldRevalidate && !formData.has("cursor");
    },
  },
];

const loaderData = useLoaderData();
const actionData = useActionData();
const data = actionData || loaderData;

// Submit the `cursor` when clicking the next page button
<Form method="post">
  <input type="hidden" name="cursor" value={data.cursor} />
  <button>Next Page</button>
</Form>

// Read `data` which comes from either `action` or `loader` for building the list

[kiliman]

What is the expectation if the user refreshes their browser? If you don't have the cursor or equivalent in the URL, it will reload data for the first page of the results. If that's OK, then your solution is fine.

I'm unsure why you can't have the cursor in the URL. As for the previous cursors, those are stored in the browser's history stack, so you wouldn't need to save them explicitly.

[rayrw]

Thank you very much for answering my question!
Yes, I'd expect it to reload the data for the first page after refreshing the browser.

In my case, I think I cannot simply store it in the browser's history stack, since the user might bookmark the URL with the cursor, leave the browser and access the URL again with a fresh history stack. In the website there would be a previous page button too, so it'd be out of sync (backend cannot find the previous page cursor). It'd be always accurate if I wipe out the cursor after leaving the website.