createSWRResource

example.ts

interface SWROptions {
  revalidateOnVisibility?: boolean;
  revalidateOnNetwork?: boolean;
  revalidateOnFocus?: boolean;
}

function createSWRResource<T>(
  data: Resource<T>,
  refetch: () => void,
  options: SWROptions,
): Resource<T> {
  const [state, setSignal] = createSignal(untrack(data));

  createEffect(() => {
    if (!data.loading && !data.error) {
      setSignal(data());
    }
  });

  let throttle;

  function revalidate() {
    if (throttle) {
      clearTimeout(throttle);
    }
    throttle = setTimeout(() => {
      refetch();
      throttle = undefined;
    }, 2000);
  }

  createEffect(() => {
    if (options.revalidateOnVisibility ?? true) {
      const onVisible = () => {
        if (document.visibilityState === 'visible') {
          revalidate();
        }
      };
      window.addEventListener('visibilitychange', onVisible, false);
      onCleanup(() => {
        window.removeEventListener('visibilitychange', onVisible, false);
      });
    }
    if (options.revalidateOnFocus ?? true) {
      window.addEventListener('focus', revalidate, false);
      onCleanup(() => {
        window.removeEventListener('focus', revalidate, false);
      });
    }
    if (options.revalidateOnNetwork ?? true) {
      window.addEventListener('online', revalidate, false);
      onCleanup(() => {
        window.removeEventListener('online', revalidate, false);
      });
    }
  });

  return state;
}