Skip to content

Revalidation

SWRV revalidates data automatically on focus, reconnect, and interval updates by default.

TIP

If you want to revalidate manually, see Mutation.

Revalidate on focus

When the window regains focus, SWRV revalidates active keys:

vue
<script setup lang="ts">
import useSWRV from "swrv";

useSWRV("/api/user", fetcher, {
  revalidateOnFocus: true,
});
</script>

Disable it with revalidateOnFocus: false or throttle it with focusThrottleInterval.

If you need to override how focus is detected, see Global configuration for initFocus().

Revalidate on interval

Polling is controlled by refreshInterval:

vue
<script setup lang="ts">
import useSWRV from "swrv";

useSWRV("/api/metrics", fetcher, {
  refreshInterval: 5000,
});
</script>

refreshInterval can also be a function of the latest data:

ts
const options = {
  refreshInterval: (latest?: { busy?: boolean }) => (latest?.busy ? 1000 : 5000),
};

By default, SWRV does not poll when the page is hidden or offline. Use refreshWhenHidden and refreshWhenOffline if you need to opt into those cases.

Revalidate on reconnect

SWRV also revalidates when the browser regains network connectivity:

vue
<script setup lang="ts">
import useSWRV from "swrv";

useSWRV("/api/user", fetcher, {
  revalidateOnReconnect: false,
});
</script>

Disable automatic revalidations

Some resources should never be revalidated automatically after the first load. For those cases, use swrv/immutable:

vue
<script setup lang="ts">
import useSWRVImmutable from "swrv/immutable";

const { data } = useSWRVImmutable("/api/build-metadata", fetcher);
</script>

It has the same API as useSWRV. It is equivalent to:

ts
useSWRV(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  refreshInterval: 0,
});

See API for the immutable entry point shape.

You can also disable each behavior individually with revalidateOnFocus, revalidateOnReconnect, or refreshInterval: 0.

Revalidate on mount

revalidateOnMount controls the first activation only:

vue
<script setup lang="ts">
import useSWRV from "swrv";

useSWRV("/api/user", fetcher, {
  revalidateOnMount: false,
});
</script>

When revalidateOnMount is undefined, SWRV falls back to revalidateIfStale.

That means mount behavior works like this:

  • if revalidateOnMount is true, always revalidate on activation
  • if revalidateOnMount is false, never revalidate on activation
  • otherwise, revalidate if there is no data yet or if stale data should be revalidated through revalidateIfStale

Activity gates

SWRV also supports lower-level gates for non-standard environments:

  • isPaused()
  • isVisible()
  • isOnline()
  • initFocus()
  • initReconnect()

These are most useful when you need to adapt SWRV to a custom host environment rather than the default browser behavior. They are configured through SWRVConfig.

Released under the Apache-2.0 License.