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?

SolidJS•4y ago•

1 reply

beganovich

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>
  );
}

Manually refetching server data, causes double request

Similar Threads

Manually refetching server data, causes double request

Similar Threads

Similar Threads

Similar Threads