swrv

SWRV supports fetching data that depends on previous results. To achieve this, pass a function as the cache key to useSWRV. If the function returns a falsy value, the fetcher will not trigger. Because the dependency is inside the cache key function, SWRV watches it and will trigger the fetch automatically once the dependency becomes available.

<script>
import { ref } from 'vue'
import useSWRV from 'swrv'

export default {
  name: 'Profile',

  setup() {
    const { data: user } = useSWRV('/api/user', fetch)
    const { data: projects } = useSWRV(() => user.value && '/api/projects?uid=' + user.value.id, fetch)
    // if the return value of the cache key function is falsy, the fetcher
    // will not trigger, but since `user` is inside the cache key function, 
    // it is being watched so when it is available, then the projects
    // will be fetched.

    return {
      user,
      projects
    }
  },
}
</script>

To represent your UI as a function of the stale-while-revalidate lifecycle, you can implement a custom composable like useSwrvState. This allows you to distinguish between different states such as PENDING (initial load), VALIDATING (revalidating in background), SUCCESS, ERROR, and STALE_IF_ERROR (error occurred but stale data is available).

import { ref, watchEffect } from 'vue'

const STATES = {
  VALIDATING: 'VALIDATING',
  PENDING: 'PENDING',
  SUCCESS: 'SUCCESS',
  ERROR: 'ERROR',
  STALE_IF_ERROR: 'STALE_IF_ERROR',
}

export default function(data, error, isValidating) {
  const state = ref('idle')
  watchEffect(() => {
    if (data.value && isValidating.value) {
      state.value = STATES.VALIDATING
      return
    }
    if (data.value && error.value) {
      state.value = STATES.STALE_IF_ERROR
      return
    }
    if (data.value === undefined && !error.value) {
      state.value = STATES.PENDING
      return
    }
    if (data.value && !error.value) {
      state.value = STATES.SUCCESS
      return
    }
    if (data.value === undefined && error.value) {
      state.value = STATES.ERROR
      return
    }
  })

  return {
    state,
    STATES,
  }
}

Since all swrv instances share a global cache, you can synchronize swrv data with a Vuex store by using Vue watchers on the returned data ref. It is recommended to wrap useSWRV in a custom composable to manage application-level side effects, such as dispatching Vuex actions when data changes.

<script>
import { defineComponent, ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import useSWRV from 'swrv'
import { getAllTasks } from './api'

export default defineComponent({
  setup() {
    const store = useStore()

    const tasks = computed({
      get: () => store.getters.allTasks,
      set: (tasks) => {
        store.dispatch('setTaskList', tasks)
      },
    })

    const addTasks = (newTasks) => store.dispatch('addTasks', { tasks: newTasks })

    const { data } = useSWRV('tasks', getAllTasks)

    // Using a watcher, you can update the store with any changes coming from swrv
    watch(data, newTasks => {
      store.dispatch('addTasks', { source: 'Todoist', tasks: newTasks })
    })

    return {
      tasks
    }
  },
})
</script>