---
title: "useAggregate"
description: "useAggregate, auto-imported in the app: its options, return value and types."
canonical_url: "https://nuxt-backend.dev/docs/reference/api/use-aggregate"
---
# useAggregate

## Interfaces

### UseAggregateReturn

Defined in: [src/runtime/vue/composables/use-aggregate.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-aggregate.ts)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="data">
        
      </a>
      
       <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The count or sum: <code>
        undefined
      </code>
      
       until the first read lands, while skipped, and after a failed read; <code>
        0
      </code>
      
       for a query that answers no number.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-aggregate.ts" rel="nofollow">
        src/runtime/vue/composables/use-aggregate.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       until the first read for the current arguments lands; <code>
        false
      </code>
      
       while skipped.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-aggregate.ts" rel="nofollow">
        src/runtime/vue/composables/use-aggregate.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      < | <a href="https://nuxt-backend.dev/docs/reference/api/functions#backenderror">
        <code>
          BackendError
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Why the read failed, or <code>
        null
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-aggregate.ts" rel="nofollow">
        src/runtime/vue/composables/use-aggregate.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Functions

### useAggregate()

```ts
function useAggregate<Query>(query, ...args): UseAggregateReturn;
```

Defined in: [src/runtime/vue/composables/use-aggregate.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-aggregate.ts)

Reactive numeric aggregate (count / sum) backed by a Convex query, typically
one that reads from the [Aggregate](https://www.convex.dev/components/aggregate) component. Takes the query's arguments the way `useQuery` does,
`'skip'` included. It never throws: a failed read shows in `error`.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="type-parameter-query">
        
      </a>
      
       <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <code>
        FunctionReference_future
      </code>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      ...<code>
        args
      </code>
    </td>
    
    <td>
      <code>
        OptionalRestArgsOrSkip
      </code>
      
      <<code>
        Query
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseAggregateReturn`](#useaggregatereturn)

#### Example

```vue
<script setup lang="ts">
import { useAggregate } from '#imports'
import { api } from '#backend/api'

const messages = useAggregate(api.aggregates.countMessages)
</script>
<template>
  <p>{{ messages.data.value ?? '…' }} messages</p>
</template>
```


## Sitemap

See the full [sitemap](https://nuxt-backend.dev/sitemap.md) for all pages.