Manually refetching server data, causes double request

Hi, I was wondering if this is correct behavior or am I missing something. There's following code:

export function routeData() {
  return createServerData$(async () => ({
    random: Math.random(),
  }));
}

export default function Index() {
  const numbers = useRouteData<typeof routeData>();
  const [, refetch] = createRouteAction(() => refetchRouteData());

  return (
    <div>
      Posts
      <div>{numbers()?.random}</div>
      <button onClick={() => refetch()}>Refetch</button>
    </div>
  );
}

export function routeData() {
  return createServerData$(async () => ({
    random: Math.random(),
  }));
}

export default function Index() {
  const numbers = useRouteData<typeof routeData>();
  const [, refetch] = createRouteAction(() => refetchRouteData());

  return (
    <div>
      Posts
      <div>{numbers()?.random}</div>
      <button onClick={() => refetch()}>Refetch</button>
    </div>
  );
}

So, as you can probably guess, once we load the page, it fetches some data from server. In this case just randomly generated number. Now, let's imagine I have "Refetch" button that should.. you guessed it.. refetch the data. However, the problem is - two requests. I assume one is for the actual route action call and second for page load, or something? Can someone explain why am I seeing two requests & how to prevent this? Edit: Calling "refetchRouteData" directly in button causes one request, but what if I need it in action?

1 Reply

mizark•2y ago

Did you get an answer to this?

Gaming

Programming

Manually refetching server data, causes double request