> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Querying Metrics

> Query metrics from the components.

<div />

The components' query prop can use either in-line metrics or pre-defined metrics.

<Info>
  For more information on the different types of metrics and their syntax, refer to the [Types of Metrics](/docs/query-apis/types-of-metrics) documentation.
</Info>

## Query using in-line metrics

### In-line sum metric

```jsx theme={"system"}
import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryBySum() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query by ad hoc sum metric.
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: {
      sum: {
        dataPool: { id: "<PROPEL_DATAPOOL_ID>" },
        measure: { columnName: "quantity" },
      },
    },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
  });
  return <p>{data?.counter?.value}</p>;
}
```

### In-line custom metric

```jsx theme={"system"}
import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryByCustom() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query by ad hoc custom metric.
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: {
      custom: {
        dataPool: { id: "<PROPEL_DATAPOOL_ID>" },
        expression: "SUM(taco_total_price) / SUM(quantity)",
      },
    },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
  });
  return <p>{data?.counter?.value}</p>;
}
```

## Query using predefined Metrics

### Metric by ID

```jsx theme={"system"}
import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryById() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query param by id
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: { id: "<PROPEL_METRIC_ID>" },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
  });
  return <p>{data?.counter?.value}</p>;
}
```

### Metric by name

```jsx theme={"system"}
import { useCounter, useAccessToken } from "@propeldata/ui-kit";

function CounterMetricQueryByName() {
  const { accessToken } = useAccessToken();
  // useCounter hooks with metric query param by name
  const { data } = useCounter({
    accessToken: "<PROPEL_ACCESS_TOKEN>",
    metric: { name: "Revenue" },
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
  });
  return <p>{data?.counter?.value}</p>;
}
```