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

[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