Migrate to vue-query

src/activities/pages/GroupActivities.vue

@@ -148,15 +148,16 @@ import KSpinner from '@/utils/components/KSpinner'
 import ActivityList from '@/activities/components/ActivityList'
 import KNotice from '@/utils/components/KNotice'
 import PlaceList from '@/places/components/PlaceList'
-import { useActivityListQuery } from '@/activities/queries'
+import { queryKeyActivityList, useActivityListQuery } from '@/activities/queries'
 import reactiveNow from '@/utils/reactiveNow'
 import { useActivityEnricher, useActivityTypeEnricher } from '@/activities/enrichers'
 import { useActivityService } from '@/activities/services'
 import { useCurrentGroupService } from '@/group/services'
 import { usePlaceEnricher } from '@/places/enrichers'
 import { usePlaceService } from '@/places/services'
-import { useRouteParam } from '@/utils/mixins/bindRoute'
+import { useQueryParams } from '@/utils/mixins/bindRoute'
 import ICSBtn from '@/activities/components/ICSBtn'
+import { useQueryClient } from 'vue-query'
 
 export default {
   components: {
@@ -184,12 +185,19 @@ export default {
     const enrichActivityType = useActivityTypeEnricher()
     const enrichPlace = usePlaceEnricher()
 
-    const type = useRouteParam('type')
-    const slots = useRouteParam('slots')
-    const place = useRouteParam('place')
+    const defaultQueryParams = {
+      type: null,
+      slots: null,
+      place: null,
+    }
+
+    const {
+      type,
+      slots,
+      place,
+    } = useQueryParams(defaultQueryParams)
 
     function clearFilters () {
-      // TODO: if they are all set, clearing them like this doesn't actually work... like non-atomic updates to route.query...
       type.value = null
       slots.value = null
       place.value = null
@@ -200,30 +208,45 @@ export default {
       return new Date(Math.floor(new Date().getTime() / roundTo) * roundTo)
     }
 
+    const queryClient = useQueryClient()
+
+    /*
+      TODO: something funny happening where it sort of freezes when there is query cache...
+        steps:
+          - visit http://localhost:8080/#/group/6/activities?type=15 (i.e. with filter selected)
+          - then select "All types" in the filter
+          - notice no freeze (even though it pauses to load, browser stays responsive)
+          - select some other type, then select "All types" again
+          - now there is some weird kind of lag...
+
+       The difference is that the second time the queryClient already has data...
+
+       cacheTime: 0 makes it go away, maybe that's fine...
+
+     */
     const {
       isLoading,
       isFetching,
       isFetchingNextPage,
       activities,
       hasNextPage,
       fetchNextPage,
-      remove,
+      // remove,
     } = useActivityListQuery({
       groupId,
       placeId: place,
-      // so we can use cached query results for a while, otherwise it'll always be a fresh query
-      dateMin: newDateRoundedTo5Minutes(),
       activityTypeId: type,
       slots,
-      // TODO: add activity type filter for query to backend...
+      // so we can use cached query results for a while, otherwise it'll always be a fresh query
+      dateMin: newDateRoundedTo5Minutes(),
     }, {
       // TODO: consider this a bit more... ideally can speed up the activity rendering so we can keep more results, or just clear extra pages?
-      // cacheTime: 0,
+      cacheTime: 0,
     })
 
     onUnmounted(() => {
       // really just putting this here as don't want to keep more than first page in cache and haven't worked out how to do it better yet...
-      remove()
+      // remove()
     })
 
     function isStartedOrUpcoming (activity) {

src/activities/services.js

@@ -2,7 +2,7 @@ import { computed, unref } from 'vue'
 import { useActivityTypeListQuery } from '@/activities/queries'
 import { defineService, indexById } from '@/utils/datastore/helpers'
 
-export const useActivityService = defineService('activity', () => {
+export const useActivityService = defineService(() => {
   // queries
   const { activityTypes } = useActivityTypeListQuery()
 

src/alerts/services.js

@@ -1,7 +1,7 @@
 import { defineService } from '@/utils/datastore/helpers'
 import { useStore } from 'vuex'
 
-export const useToastService = defineService('toast', () => {
+export const useToastService = defineService(() => {
   const store = useStore()
 
   // methods

src/authuser/services.js

@@ -3,7 +3,7 @@ import { defineService } from '@/utils/datastore/helpers'
 import { useAuthUserQuery } from '@/authuser/queries'
 import { computed } from 'vue'
 
-export const useAuthService = defineService('authuser', () => {
+export const useAuthService = defineService(() => {
   // queries
   const { user, refetch } = useAuthUserQuery()
 

src/base/services.js

@@ -3,7 +3,7 @@ import { readonly, ref } from 'vue'
 import { DEFAULT_LOCALE, detectLocale } from '@/base/datastore/i18n'
 import { defineService } from '@/utils/datastore/helpers'
 
-export const useI18nService = defineService('i18n', () => {
+export const useI18nService = defineService(() => {
   const locale = ref(detectLocale() || DEFAULT_LOCALE)
 
   function setLocale (value) {

src/group/services.js

@@ -4,7 +4,7 @@ import { useStore } from 'vuex'
 import { useUserService } from '@/users/services'
 import { usePlaceService } from '@/places/services'
 
-export const useCurrentGroupService = defineService('group', () => {
+export const useCurrentGroupService = defineService(() => {
   // services
   const store = useStore()
   const {

src/groupInfo/services.js

@@ -1,7 +1,7 @@
 import { defineService } from '@/utils/datastore/helpers'
 import { useGroupInfoListQuery } from '@/groupInfo/queries'
 
-export const useGroupInfoService = defineService('groupInfo', () => {
+export const useGroupInfoService = defineService(() => {
   // queries
   // TODO: filtering for active status?
   const { groups } = useGroupInfoListQuery()

src/offers/pages/GroupOffers.vue

@@ -125,7 +125,7 @@ import DateAsWords from '@/utils/components/DateAsWords'
 
 import { DEFAULT_STATUS, useOfferListQuery } from '@/offers/queries'
 
-import { useRouteParam } from '@/utils/mixins/bindRoute'
+import { useQueryParams } from '@/utils/mixins/bindRoute'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useStoreUsers } from '@/users/queries'
@@ -146,7 +146,9 @@ const statusOptions = [
 
 const { groupId } = useCurrentGroupService()
 
-const status = useRouteParam('status', DEFAULT_STATUS)
+const { status } = useQueryParams({
+  status: DEFAULT_STATUS,
+})
 
 const { getUserRef } = useStoreUsers()
 

src/places/services.js

@@ -2,7 +2,7 @@ import { computed, unref } from 'vue'
 import { defineService, indexById } from '@/utils/datastore/helpers'
 import { usePlaceListQuery } from '@/places/queries'
 
-export const usePlaceService = defineService('place', () => {
+export const usePlaceService = defineService(() => {
   // queries
   const { places } = usePlaceListQuery()
 

src/users/services.js

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 import { useUserListAllQuery } from '@/users/queries'
 import { indexBy, indexById, defineService } from '@/utils/datastore/helpers'
 
-export const useUserService = defineService('users', () => {
+export const useUserService = defineService(() => {
   // queries
   const { isLoading, users } = useUserListAllQuery()
 

src/utils/datastore/helpers.js

@@ -358,22 +358,28 @@ export function toggles (config) {
   return result
 }
 
-const stores = []
-export function defineService (id, storeSetup) {
+export function defineService (serviceSetup) {
   if (process.env.DEV) {
-    if (typeof id !== 'string' || typeof storeSetup !== 'function') {
-      throw new Error('must be string|function args to defineService')
+    if (typeof serviceSetup !== 'function') {
+      throw new Error('must pass a serviceSetup function to defineService')
     }
   }
+
+  // hold a reference to our service instance in this outer scope so we always return the same one
+  let service
+
   return () => {
-    if (stores[id]) return stores[id]
-    let store
-    // We use a custom detached scope, otherwise it'll be cleared away, but we want this to stay around for reuse
+    // it's already setup, can just return our service instance
+    if (service) return service
+
+    // Create a detached scope so it will stay around beyond the lifecycle of the initial setup
     const scope = effectScope(true)
+
     scope.run(() => {
-      store = storeSetup()
+      // initialize our service in this scope, we get back a value, nothing fancy!
+      service = serviceSetup()
     })
-    stores[id] = store
-    return store
+
+    return service
   }
 }

src/utils/mixins/bindRoute.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { reactive, toRefs, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
 export default function bindRoute (params) {
@@ -33,31 +33,63 @@ export default function bindRoute (params) {
   return mixin
 }
 
-export function useRouteParam (name, defaultValue = null) {
+/**
+ * Create refs that map to query params.
+ *
+ * You must pass in defaults for all the parameters you are interested in.
+ * e.g.
+ *     const { type, category } = useQueryParams({ type: 'animal', category: null })
+ *
+ *  You can destructure the result, each param is a read/write ref that will keep
+ *  up to date with the underlying query param.
+ */
+export function useQueryParams (defaultParams) {
   const router = useRouter()
   const route = useRoute()
 
-  return computed({
-    get () {
-      if (Object.prototype.hasOwnProperty.call(route.query, name)) {
-        return route.query[name]
-      }
-      else {
-        return defaultValue
-      }
-    },
-    set (val) {
-      if (val === defaultValue) {
-        if (!route.query[name]) return // not even in the query
-        // if value is same as the default, remove it from the query to keep the URL neat
-        const query = { ...route.query }
-        delete query[name]
-        router.replace({ query }).catch(() => {})
-      }
-      else {
-        if (route.query[name] === val) return // hasn't changed
-        router.replace({ query: { ...route.query, ...{ [name]: val } } }).catch(() => {})
-      }
-    },
+  // The defaults passed in form our base reactive state
+  const state = reactive({ ...defaultParams })
+
+  // Keep track of when we are updating so we can avoid circular updates
+  let updatingQuery = false
+  let updatingState = false
+
+  // Read the initial query params so our state is up to date
+  updateState()
+
+  // Watch for updates to state and query
+  watch(state, () => {
+    if (!updatingState) updateQuery()
+  })
+  watch(() => route.query, () => {
+    if (!updatingQuery) updateState()
   })
+
+  // Set the state from the query
+  // If the query is missing a param, uses the default
+  function updateState () {
+    updatingState = true
+    for (const name of Object.keys(defaultParams)) {
+      state[name] = route.query[name] || defaultParams[name]
+    }
+    updatingState = false
+  }
+
+  // Set the query from the state
+  // No query param is set for falsey or default values
+  function updateQuery () {
+    updatingQuery = true
+    const query = {}
+    for (const name of Object.keys(state)) {
+      const value = state[name]
+      if (value && value !== defaultParams[name]) {
+        query[name] = value
+      }
+    }
+    router.replace({ query }).catch(() => {}).then(() => {
+      updatingQuery = false
+    })
+  }
+
+  return toRefs(state)
 }