How should client and server loaders be used together for reactive pages?

[davidbielik]

I'm looking for guidance on correct patterns for client + server loaders as it relates to reactivity.

I've read this doc, but it doesn't explain how the two should be used or when the client loader is guaranteed to be called.

---

My page simply shows a data table, and lets users sort directions.

I assume I should refactor my API call so it makes a request in both server and client functions?

Should I manually call revalidate() or is it guaranteed that the clientLoader will be called when a URL changes?

export default function Page() {
  const { items } = useLoaderData<typeof loader>();
  const [ searchParams, setSearchParams ] = useSearchParams();
  const revalidator = useRevalidator();
  const direction = searchParams.get('sort');

  useEffect(() => {
     revalidator.revidate(); // should i use this?
  }, [direction]);

  return (
    <table>
     <thead>
          <Link to={`/results?sort=${direction === 'asc' ? 'desc : 'asc'}`}>Change Direction</Link>
      </thead>
      <tbody>
          {items.map(item => (<tr>{item}</tr>))}
      </tbody>
    </table>
   )
}

async function getResults(request, context, params): Promise<{ items: Array<number> }> {
    // fetch server data
   return { items: [1, 2, 3] };
}


async function clientLoader({
  request,
  params,
  context,
  serverLoader,
}: ClientLoaderFunctionArgs) {
  // `context` seems to always be undefined?
  // do i duplicate the request here? check if data is stale? or always return server data?
  return { ...serverLoader };
};

async function loader({
  request,
  context,
  params,
}: LoaderFunctionArgs) {
   // i can use `context` here which was set in the root loader
   return await getResults(request, context, params);
};

[davidbielik]

Also, useRouteLoaderData can't be called from the client loader - how do you suggest getting existing root data from with client loader?

In my case, I load user profile data server-side, and want to access it in client loaders.

[davidbielik]

This was answered here: remix-run/react-router#12862