refactor(database): deprecated useObject()/useList()

Use `useDatabaseObject()` and `useDatabaseList()` instead.

Author: posva

docs/guide/getting-started.md

@@ -89,16 +89,16 @@ VueFire exposes a few [composables](https://vuejs.org/guide/reusability/composab
 
 #### Collections/Lists
 
-You can retrieve a reactive collection (Firestore) or list (Realtime Database) with the `useCollection()`/`useList()` composable:
+You can retrieve a reactive collection (Firestore) or list (Realtime Database) with the `useCollection()`/`useDatabaseList()` composable:
 
 <FirebaseExample>
 
 ```vue
 <script setup>
-import { useList } from 'vuefire'
+import { useDatabaseList } from 'vuefire'
 import { ref as dbRef } from 'firebase/database'
 
-const todos = useList(dbRef(db, 'todos'))
+const todos = useDatabaseList(dbRef(db, 'todos'))
 </script>
 
 <template>
@@ -138,16 +138,16 @@ If you want to change the data, you should use the Firebase API (e.g. `addDoc()`
 
 #### Documents/Objects
 
-Similarly, you can retrieve a reactive document (Firestore) or object (Realtime Database) with the `useDocument()`/`useObject()` composable:
+Similarly, you can retrieve a reactive document (Firestore) or object (Realtime Database) with the `useDocument()`/`useDatabaseObject()` composable:
 
 <FirebaseExample>
 
 ```vue
 <script setup>
-import { useObject } from 'vuefire'
+import { useDatabaseObject } from 'vuefire'
 import { ref as dbRef } from 'firebase/database'
 
-const settings = useObject(dbRef(db, 'settings', 'some_id'))
+const settings = useDatabaseObject(dbRef(db, 'settings', 'some_id'))
 </script>
 ```
 

docs/guide/global-options.md

@@ -1,6 +1,6 @@
 # Firestore and Database global Options
 
-If you find yourself passing around the same options to `useDocument()`, `useObject()`, ..., you can use the global options to avoid repeating yourself:
+If you find yourself passing around the same options to `useDocument()`, `useDatabaseObject()`, ..., you can use the global options to avoid repeating yourself:
 
 <FirebaseExample>
 
@@ -18,7 +18,7 @@ globalFirestoreOptions.converter = ...
 
 </FirebaseExample>
 
-Changing these options will affect all calls to `useDocument()`, `useObject()`, ... in your application **and the Options API usage** as well (`$firestoreBind()`, `$rtdbBind()`).
+Changing these options will affect all calls to `useDocument()`, `useDatabaseObject()`, ... in your application **and the Options API usage** as well (`$firestoreBind()`, `$rtdbBind()`).
 
 In both scenarios, **you need to make sure the returned objects contain their original `id`** so other VueFire functionalities can work correctly. The easies way to do this is by reusing the default `serialize`/`converter`:
 

docs/guide/index.md

@@ -144,7 +144,7 @@ Now let's look at the equivalent code with vuefire:
 import { initializeApp } from 'firebase/app'
 import { getDatabase, ref as dbRef } from 'firebase/firebase'
 import { createApp } from 'vue'
-import { useList } from 'vuefire'
+import { useDatabaseList } from 'vuefire'
 
 const firebase = initializeApp({ databaseURL: 'https://MY-DATABASE.firebaseio.com' })
 const db = getDatabase(firebase)
@@ -153,7 +153,7 @@ createApp({
   // setup the reactive todos property
   setup() {
     const todosRef = dbRef(db, 'todos')
-    const todos = useList(todosRef)
+    const todos = useDatabaseList(todosRef)
 
     return { todos }
   },

docs/guide/options-api-realtime-data.md

@@ -28,7 +28,7 @@ app.use(VueFire, {
 })
 ```
 
-You can pass global options to the modules but note **these options are limited to the Options API usage**.They do not affect composition API calls such as `useDocument()` and `useObject()`. [Check the global options](./global-options.md) to see how you can override those.
+You can pass global options to the modules but note **these options are limited to the Options API usage**.They do not affect composition API calls such as `useDocument()` and `useDatabaseObject()`. [Check the global options](./global-options.md) to see how you can override those.
 
 ```ts
 app.use(VueFire, {

docs/guide/realtime-data.md

@@ -10,17 +10,17 @@ When using Firebase Database and Firestore, you can either retrieve the data onc
 
 ## Declarative realtime data
 
-Use the `useCollection()`, `useList()`, `useDocument()`, and `useObject()` composables to create a realtime data connected to Firestore and/or a Realtime Database. These functions take a reference to a Collection, Query, or Document a Vue `ref()`:
+Use the `useCollection()`, `useDatabaseList()`, `useDocument()`, and `useDatabaseObject()` composables to create a realtime data connected to Firestore and/or a Realtime Database. These functions take a reference to a Collection, Query, or Document a Vue `ref()`:
 
 <FirebaseExample>
 
 ```vue
 <script setup>
-import { useList } from 'vuefire'
+import { useDatabaseList } from 'vuefire'
 import { ref as dbRef } from 'firebase/database'
 
-const todos = useList(dbRef(db, 'todos'))
-const someTodo = useObject(dbRef(db, 'todos', 'someId'))
+const todos = useDatabaseList(dbRef(db, 'todos'))
+const someTodo = useDatabaseObject(dbRef(db, 'todos', 'someId'))
 </script>
 
 <template>
@@ -54,7 +54,7 @@ const someTodo = useDocument(doc(collection(db, 'todos'), 'someId'))
 
 These composables all return a Vue `Ref` of the data. Note **this is a readonly data**, you shouldn't mutate it directly, [use the Firebase SDK](./writing-data.md) instead. It will be automatically updated when the data changes anywhere.
 
-Sometimes, you need to change the document you are observing, let's say you have a list of contacts and that you display one based on the URL, you handle this by passing a reactive variable of the data source to the `useDocument()`, `useObject()`, etc composables:
+Sometimes, you need to change the document you are observing, let's say you have a list of contacts and that you display one based on the URL, you handle this by passing a reactive variable of the data source to the `useDocument()`, `useDatabaseObject()`, etc composables:
 
 ```ts
 const route = useRoute()
@@ -259,7 +259,7 @@ Read more about [writing References to the Database](./writing-data.md#reference
 
 ### Primitive values (Database only)
 
-In Realtime Database, you can _push_ primitive values like strings, numbers, booleans, etc. When calling `useList()` on a database ref containing primitive values, **you will get a slightly different value**. Instead of an array of values, you will get an array of objects **with a `$value` and an `id` property**. This is because VueFire needs to keep track of the key of each value in order to add, update, or remove them.
+In Realtime Database, you can _push_ primitive values like strings, numbers, booleans, etc. When calling `useDatabaseList()` on a database ref containing primitive values, **you will get a slightly different value**. Instead of an array of values, you will get an array of objects **with a `$value` and an `id` property**. This is because VueFire needs to keep track of the key of each value in order to add, update, or remove them.
 
 ```js
 import { ref as databaseRef, push } from 'firebase/database'
@@ -270,7 +270,7 @@ push(numbersRef, 24)
 push(numbersRef, 7)
 push(numbersRef, 10)
 
-const numberList = useList(numbersRef)
+const numberList = useDatabaseList(numbersRef)
 // [{ $value: 24, id: '...' }, { $value: 7, id: '...' }, { $value: 10, id: '...' }]
 // note the order might be different
 ```
@@ -282,8 +282,8 @@ Usually, the different composables accept a generic to enforce the type of the d
 <FirebaseExample>
 
 ```ts
-const contacts = useList<Contact>(dbRef(db, 'contacts'))
-const settings = useObject<Settings>(dbRef(db, 'settings/someId'))
+const contacts = useDatabaseList<Contact>(dbRef(db, 'contacts'))
+const settings = useDatabaseObject<Settings>(dbRef(db, 'settings/someId'))
 ```
 
 ```ts

docs/guide/ssr.md

@@ -12,11 +12,11 @@ When doing SSR (Server Side Rendering) you want to wait for the data on the serv
 ```vue
 <script setup>
 import { ref as dbRef } from 'firebase/database'
-import { useObject, useDatabase } from 'vuefire'
+import { useDatabaseObject, useDatabase } from 'vuefire'
 
 const db = useDatabase()
 // automatically waits for the data to be loaded on the server
-const quizResults = useObject(dbRef(db, 'quizzes/' + quizId))
+const quizResults = useDatabaseObject(dbRef(db, 'quizzes/' + quizId))
 </script>
 ```
 
@@ -89,7 +89,7 @@ Web Security is a broad topic that we cannot cover here. We recommend you to rea
 
 ## Usage outside of components
 
-If you are using VueFire composables outside of components, e.g. using `useDocument()` within a [Pinia](https://pinia.vuejs.org) store, you need to manually wait for the data to be loaded on the server as VueFire cannot call `onServerPrefetch()` for you. This means you also need to [use `<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html#suspense) to be able to use `await` within `setup()`. VueFire exposes a function to retrieve all pending promises created by the different composables (`useDocument()`, `useObject()`, etc). Await it inside of **any component that uses the data**:
+If you are using VueFire composables outside of components, e.g. using `useDocument()` within a [Pinia](https://pinia.vuejs.org) store, you need to manually wait for the data to be loaded on the server as VueFire cannot call `onServerPrefetch()` for you. This means you also need to [use `<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html#suspense) to be able to use `await` within `setup()`. VueFire exposes a function to retrieve all pending promises created by the different composables (`useDocument()`, `useDatabaseObject()`, etc). Await it inside of **any component that uses the data**:
 
 ```vue
 <script setup>
@@ -110,7 +110,7 @@ You can exclude data from hydration by passing `false` to the `ssrKey` option:
 
 ```ts
 useDocument(..., { ssrKey: false })
-useList(..., { ssrKey: false })
+useDatabaseList(..., { ssrKey: false })
 // etc
 ```
 

packages/nuxt/playground/pages/database-todo-list.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import {
   push,
   remove,
@@ -8,7 +7,7 @@ import {
   update,
 } from 'firebase/database'
 import { ref } from 'vue'
-import { useDatabase, useList } from 'vuefire'
+import { useDatabase, useDatabaseList } from 'vuefire'
 import { Todo } from '~/components/TodoItem.vue'
 
 const db = useDatabase()
@@ -17,7 +16,7 @@ const todosRef = dbRef(db, 'todos')
 // const finishedTodos = query(todosRef, where('finished', '==', true))
 // const unfinishedTodos = query(todosRef, where('finished', '==', false))
 
-const todos = useList<Todo>(todosRef)
+const todos = useDatabaseList<Todo>(todosRef)
 
 const newTodoText = ref('')
 
@@ -43,16 +42,13 @@ function removeTodo(id: string) {
 function toggleTodos() {
   // TODO:
 }
-
 </script>
 
 <template>
   <div>
-    <button @click="toggleTodos">
-      Toggle todos
-    </button> <br>
+    <button @click="toggleTodos">Toggle todos</button> <br />
     <form @submit.prevent="addTodo">
-      <input v-model.trim="newTodoText" placeholder="Add new todo">
+      <input v-model.trim="newTodoText" placeholder="Add new todo" />
       <button>Add Todo</button>
     </form>
     <ul>

playground/src/pages/rtdb-todos.vue

@@ -7,7 +7,7 @@ import {
   update,
 } from 'firebase/database'
 import { ref } from 'vue'
-import { useDatabase, useList } from 'vuefire'
+import { useDatabase, useDatabaseList } from 'vuefire'
 
 interface Todo {
   created: Date
@@ -21,7 +21,7 @@ const todosRef = dbRef(db, 'todos')
 // const finishedTodos = query(todosRef, where('finished', '==', true))
 // const unfinishedTodos = query(todosRef, where('finished', '==', false))
 
-const todos = useList<Todo>(todosRef)
+const todos = useDatabaseList<Todo>(todosRef)
 
 const newTodoText = ref('')
 

src/database/index.ts

@@ -24,7 +24,7 @@ export type UseListOptions = UseDatabaseRefOptions
  * @param reference - Reference or query to the database
  * @param options - optional options
  */
-export function useList<T = unknown>(
+export function useDatabaseList<T = unknown>(
   reference: _MaybeRef<DatabaseReference | Query>,
   options?: UseListOptions
 ): _RefDatabase<VueDatabaseQueryData<T>> {
@@ -35,6 +35,11 @@ export function useList<T = unknown>(
   }) as _RefDatabase<VueDatabaseQueryData<T>>
 }
 
+/**
+ * @deprecated use `useDatabaseList()` instead
+ */
+export const useList = useDatabaseList
+
 export type UseObjectOptions = UseDatabaseRefOptions
 
 /**
@@ -45,7 +50,7 @@ export type UseObjectOptions = UseDatabaseRefOptions
  * @param reference - Reference or query to the database
  * @param options - optional options
  */
-export function useObject<T = unknown>(
+export function useDatabaseObject<T = unknown>(
   reference: _MaybeRef<DatabaseReference>,
   options?: UseObjectOptions
 ): _RefDatabase<VueDatabaseDocumentData<T> | undefined> {
@@ -56,6 +61,11 @@ export function useObject<T = unknown>(
   }) as _RefDatabase<VueDatabaseDocumentData<T>>
 }
 
+/**
+ * @deprecated use `useDatabaseObject()` instead
+ */
+export const useObject = useDatabaseObject
+
 /**
  * Retrieves the Database instance.
  *

src/database/optionsApi.ts

@@ -41,7 +41,7 @@ export const databaseUnbinds = new WeakMap<
 
 /**
  * Install this plugin if you want to add `$databaseBind` and `$databaseUnbind` functions. Note this plugin is only necessary if
- * you use the Options API. If you **exclusively use the Composition API** (e.g. `useObject()` and `useList()`), you
+ * you use the Options API. If you **exclusively use the Composition API** (e.g. `useDatabaseObject()` and `useDatabaseList()`), you
  * should not add it.
  *
  * @deprecated Use `VueFire` and `VueFireDatabaseOptionsAPI` with the `modules` option instead.
@@ -166,7 +166,7 @@ export function databasePlugin(
 
 /**
  * VueFire Database Module to be added to the `VueFire` Vue plugin options. If you **exclusively use the Composition
- * API** (e.g. `useObject()` and `useList()`), you should not add it.
+ * API** (e.g. `useDatabaseObject()` and `useDatabaseList()`), you should not add it.
  *
  * @example
  *