fix: avoid fetching the user's addressbooks per component instance

src/oca.ts

@@ -15,6 +15,8 @@ import './css/contacts.scss'
 // Dialogs css
 import '@nextcloud/dialogs/style.css'
 
+const pinia = createPinia()
+
 declare global {
 	interface Window {
 		OCA: {
@@ -42,7 +44,6 @@ window.OCA.Contacts = {
 			contactEmailAddress,
 		})
 
-		const pinia = createPinia()
 		app.use(pinia)
 		app.use(store)
 

src/store/readOnlyContactDetails.ts

@@ -0,0 +1,44 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import client from '../services/cdav.js'
+import store from './index.js'
+import usePrincipalsStore from './principals.js'
+
+export default defineStore('readOnlyContactDetails', {
+	state: () => ({
+		promise: null,
+		fetched: false,
+	}),
+
+	actions: {
+		async init() {
+			if (this.fetched) {
+				return Promise.resolve()
+			}
+
+			if (this.promise) {
+				return this.promise
+			}
+
+			this.promise = (async () => {
+				await client.connect({ enableCardDAV: true })
+				const principalsStore = usePrincipalsStore()
+				principalsStore.setCurrentUserPrincipal(client)
+				await store.dispatch('getAddressbooks')
+			})()
+
+			try {
+				await this.promise
+				this.fetched = true
+			} finally {
+				this.promise = null
+			}
+
+			return this.promise
+		},
+	},
+})

src/views/ReadOnlyContactDetails.vue

@@ -58,9 +58,8 @@ import ContactDetailsProperty from '../components/ContactDetails/ContactDetailsP
 import IsMobileMixin from '../mixins/IsMobileMixin.ts'
 import Contact from '../models/contact.js'
 import rfcProps from '../models/rfcProps.js'
-import client from '../services/cdav.js'
 import validate from '../services/validate.js'
-import usePrincipalsStore from '../store/principals.js'
+import useReadOnlyContactDetailsStore from '../store/readOnlyContactDetails.ts'
 
 const { profileEnabled } = loadState('user_status', 'profileEnabled', false)
 
@@ -211,11 +210,9 @@ export default {
 	},
 
 	async beforeMount() {
-		// Init client and stores
-		await client.connect({ enableCardDAV: true })
-		const principalsStore = usePrincipalsStore()
-		principalsStore.setCurrentUserPrincipal(client)
-		await this.$store.dispatch('getAddressbooks')
+		// Init store
+		const store = useReadOnlyContactDetailsStore()
+		await store.init()
 
 		// Fetch contact
 		await this.fetchContact()