Manually trigger loader refresh

[chadoh]

I'm building an offline-first app where data is primarily stored in local storage using localForage. Here's a simplified version of my index route:

import { useLoaderData } from 'react-router-dom'
import type { LoaderFunction } from '@remix-run/router'
import { getLedgers } from '../../../data/local'

export const loader: LoaderFunction = async (): Promise<string[]> => {
  return getLedgers()
}

function Root() {
  const ledgers = useLoaderData() as Awaited<string[]>
  return <>{ledgers.join(', ')}</>
}

export const element = <Root />

If the user signs into Google, a worker is added to the page, syncing data to/from Google Sheets in the background. As the worker updates the local data store, it sends an event to the main process. How can I manually/procedurally trigger a reload of the loader when this happens?

This also seems relevant to apps that use subscriptions with GraphQL, WebSockets, or other architectures.

[kiliman]

const navigate = useNavigate()
navigate('.', { replace: true })

https://reactrouter.com/en/main/hooks/use-navigate

[chadoh]

Wonderful, thank you.

I created a simple hook:

import { useNavigate } from 'react-router-dom'
import { subscribe } from '../data/local'

/**
 * Refresh data from this route's `loader` when data changes in the local data store.
 */
export function useDataSubscription() {
  const navigate = useNavigate()
  React.useEffect(() => {
    return subscribe(() => {
      navigate('.', { replace: true })
    })
  }, [])
}

Which can be used within a component. Diff with the component I showed above:

 import { useLoaderData } from 'react-router-dom'
 import type { LoaderFunction } from '@remix-run/router'
 import { getLedgers } from '../../../data/local'
+import { useDataSubscription } from '../../hooks'
 
 export const loader: LoaderFunction = async (): Promise<string[]> => {
   return getLedgers()
 }
 
 function Root() {
+  useDataSubscription()
   const ledgers = useLoaderData() as Awaited<string[]>
   return <>{ledgers.join(', ')}</>
 }
 
 export const element = <Root />

[kiliman]

Nice. @sergiodxa has a whole article on different techniques for refreshing data.

https://sergiodxa.com/articles/automatic-revalidation-in-remix

[sergiodxa]

Also you don't need to do the navigate(".") anymore, use the useRevalidator hook instead

[chadoh]

@sergiodxa if you add that as a separate answer, I'll mark it as correct, so future readers don't use the less elegant API

[DanBotero]

@sergiodxa In Remix docs, the note for this hook says:

"While you can render multiple occurrences of useRevalidator at the same time, underneath it is a singleton. This means when one revalidator.revalidate() is called, all instances go into the "loading" state together (or rather, they all update to report the singleton state)."

Will the same behavior happen with the use of useNavigate()?

[sergiodxa]

useNavigate just returns a functions, and the navigation is global, so the state is reported in useNavigation which is also a singleton since it's the global navigation.

[nmitic]

I landed here after a google search for "retry loader manually for selected differed requests"

Is something like this possible?

I have multiple request which are deffered and later awaited in the UI with loader and error component. But I would like to provide the users with the way to retry failed requests.

I know I can more fetching to the component, but I would like to know if I can do it using the react router loader instead and keep thing simpler.

[Clearmist]

I think I've figured out this problem. When you have deferred data fetched from a loader then want to refetch the data we can make use of Promise.all to properly show our loading component while the revalidation (rerunning our loader) is occurring.

import { Suspense } from 'react';
import { Await, useAsyncValue, useLoaderData, useRevalidator } from 'react-router-dom';

function DisplayData () {
  const data = useAsyncValue();
}

export default function Leaderboard() {
  const revalidator = useRevalidator();
  const data = useLoaderData();

  const revalidatePromise = new Promise((resolve, reject) => {
    if (revalidator.state === 'idle') {
      resolve('now idle');
    }
  });

  // Create a Promise.all for the Await component to use. Include the revalidation promise, but keep only the results of the promise we want.
  const Promises = Promise.all([data.myData, revalidatePromise]).then((value) => value[0]);

  return (
    <div>
      <Suspense fallback={<Pending />}>
        <Await resolve={Promises} errorElement={<div>The component did not load correctly.</div>}>
          <DisplayData />
        </Await>
      </Suspense>
    </div>
  );
}

[DatTN95]

sorry but i have a problem, i using tanstack table, when i removed item in page number is 7 and call revalidator.revalidate();
page number back to 1, i need keep page 7

[renatobenks]

@DatTN95 Ideally, you should be put your search params in the URL through a query string, so you would be good to go!