VueFire + Pinia for caching

[3zzy]

I'm looking to use VueFire with Pinia and pinia-plugin-persistedstate to reduce the number of reads.

Wish VueFire had caching feature built-in but I wonder if anyone is already doing something similar and could share best practices or a simpler more elegant way to achieve this without or without Pinia? Could useMemoize be used somehow?

Thanks for your help.

[posva]

Firebase itself has a caching feature built-in. I don't think you need or even should add any other layer of cache 😅

[Blinks44]

So use Pinia with Firebase is not a best practice? And preferable way is to user VueFire inside Vue components?

I'm struggling with understanding how to use one store that depends on other store?

// stores/users.js

export const useUsersStore = defineStore('users', () => {
  const auth = useFirebaseAuth()!;

  const user = useCurrentUser();
  
  // other stuff to register, login, etc...
});

Of course, below user.uid works only if i enable routeguard to wait for user to be loaded (and this question is not for only users, but maybe other collection depends on another collection). I think i am doing something wrong.

So the question is: what is proper way to get data from other store or component if this data is undefined in the beginning and will populate later? And not to get errors, that i can't fetch, filter, etc, because initial data is undefined. Thanks!

// stores/notes.js

export const useNotesStore = defineStore('notes', () => {
  const usersStore = useUsersStore();
  const { user } = storeToRefs(usersStore);

  const notesRef = collection(db, 'users', user.value.uid, 'notes'); // only works with routeguard

  const listOrder = ref<OrderByDirection>('asc');
  const listQuery = computed(() => {
    return query(notesRef, orderBy('created_at', listOrder.value));
  });
  const list = useCollection<Note>(listQuery, {
    ssrKey: 'notes'
  });
  const listLoaded = ref(false);

  watch(list, function (list) {
    if (list.length) listLoaded.value = true;
  });

  // other stuff in store to compute total numbers, etc
});

[posva]

it's not about best practices, it's just this specific thing about trying to optimize what Firebase already optimizes. You can even recreate a doc() in two different components and call in different places useDocument() as Firebase will still use the same connection.

To answer your second question:
Your notesRef is computed only once, inline it within the listQuery computed so it changes based on user.value. Additionally, you need to check if the user is there:

const listOrder = ref<OrderByDirection>('asc')
const listQuery = computed(() => {
  if (!user.value) {
    // cannot bind without a user
    return null
  }
  return query(
    collection(db, 'users', user.value.uid, 'notes'),
    orderBy('created_at', listOrder.value)
  )
})
const list = useCollection<Note>(listQuery, {
  ssrKey: 'notes',
})