useSql

Query data using SQL.

Query data using the SQL 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 { useSql } from "@propeldata/ui-kit";

const queryClient = new QueryClient();

function SqlTable() {
  const { data } = useSql({
    query: 'SELECT * FROM "TacoSoft Demo Data" LIMIT 5'
  });

  const { columns, rows } = data?.sqlV1 ?? {};

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

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

GitHub

Example

Props API

query · string

The SQL query.

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.