Query the Top Values API from frontend applications.

Use Access Policies and multi-tenant JWT tokens to control access to your data.

'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RelativeTimeRange, useTopValues } from "@propeldata/ui-kit";

const queryClient = new QueryClient();

function UseTopValues() {
  const { data } = useTopValues({
    dataPool: { name: "TacoSoft Demo Data" },
    columnName: 'restaurant_name',
    timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 },
  });

  return (
    <pre>
      {JSON.stringify(data?.topValues?.values, null, 2)}
    </pre>
  );
}

export default function UseSqlExample() {
  return (
    <QueryClientProvider client={queryClient}>
      <UseTopValues />
    </QueryClientProvider>
  );
}

GitHub

Example

​
Props API

​
columnName
string

The column to fetch the unique values from

​
dataPool
Maybe<DataPoolInput>

The Data Pool to be queried. A Data Pool ID or unique name can be provided

​
maxValues
number

The maximum number of values to return. It can be a number between 1 and 1,000. If the parameter is omitted, default value 10 is used

​
timeZone
string

Indicates specific time zone region

​
timeRange
TimeRangeInput

Specify the time range for a time series, counter, or leaderboard Metric query

​
metric
string | DeepPartial<MetricInput>

The metric prop allows you to specify which metric to query. You can query predefined metrics by passing their name or ID as a string, or you can query metrics on-the-fly by passing an inline metric definition to the prop.

​
accessToken
string

Access token used for the query. While you can pass this one to each component, we recommend wrapping components in the AccessTokenProvider instead:

​
refetchInterval
number

Interval in milliseconds for refetching the data

​
retry
boolean

Whether to retry on errors.

​
propelApiUrl
string

This prop allows you to override the URL for Propel’s GraphQL API. You shouldn’t need to set this unless you are testing.

​
enabled
boolean

When false, the component will not make any GraphQL requests, default is true.