Can data be retrieved again from loader in Remix?

[huangcong12]

Hello everyone,

I'm a newcomer to JavaScript and Remix. I'd like to inquire about how to fetch data multiple times from a Promise. Does Remix integrate similar functionality?

Let's take the example below: suppose there's a Task currently in progress, and we need to display its information (such as status) to the user. You can imagine that the Task exists in MySQL. Currently, we use getTask to fetch the task's Promise, and it works fine if we only display it once.

However, the user wishes to add a feature that automatically retrieves Task data every 5 seconds. They want to call getTask(id) to get the latest Task information until the task is completed.

Currently, I've thought of 2 methods:

1. Refreshing the entire page (our page is complex, so it's not a good user experience);
2. Writing a new API and fetching all data from the API (not very elegant, feels like going back to the time before Remix).

Therefore, I'd like to inquire if Remix provides functionality to fetch data from a Promise again. I haven't found a solution in the documentation or through Google. Thank you.

export const loader = async ({ request }) => {
  const id = 1;
  const taskPromise = getTask(id);
  return defer({
    taskPromise: taskPromise
  });
};

export default function Index() {
  const { taskPromise } = useLoaderData();

  return (
    <Suspense>
     <Await resolve={taskPromise}>
      {(task) => { // TODO Show the data }}
     </Await>
    </Suspense>
  )
}

[gustavopch]

Search for remix server sent events. That's probably what you want.

[huangcong12]

Thank you, gustavopch, for this cool feature, and I really love it. Following the guidance from https://sergiodxa.com/tutorials/use-server-sent-events-with-remix, I tried to create a countdown demo in my Shopify Remix. However, I encountered some difficulties, as it prompted: "Cannot find module [...] or its corresponding type declarations." Then, I referred to sergiodxa/remix-utils#228 and made some adjustments, but it still didn't work. My abilities tell me that I can't continue because I'm not using a pure Remix; I'm using a Shopify-adjusted Remix with many packages inside, and they may constrain each other. Continuing might cause more problems, so I stopped there. Thank you for letting me know about this feature.

[kiliman]

Here's an article that shows how to use the useRevalidator hook to keep your local data fresh.

https://sergiodxa.com/tutorials/keep-your-loader-data-fresh-in-remix

[huangcong12]

Thank you, kiliman, for this inspiring feature. It's simple yet solves my problem. I'm thrilled, and I wish you a wonderful day.