> ## 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.

# useSql

> Query data using SQL.

<div />

Query data using the [SQL API](/docs/query-apis/sql-api) from frontend applications.

<Note>
  Use [Access Policies](/docs/access-policies) and [multi-tenant JWT tokens](/docs/multi-tenant-jwt-tokens) to control access to your data.
</Note>

```jsx {8,9,10} theme={"system"}
'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>
  );
}
```

<div className="flex justify-center gap-8 mt-2">
  <a href="https://github.com/propeldata/ui-kit/blob/main/packages/ui-kit/src/hooks/useSql/useSql.ts" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="github" size={18} />

    GitHub

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>

  <a href="https://github.com/propeldata/ui-kit-docs-examples/blob/main/src/app/use-sql/page.tsx" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="github" size={18} />

    Example

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>
</div>

## Props API

<ParamField path="query" type={`string`}>
  The SQL query.
</ParamField>

<ParamField path="accessToken" type={`string`}>
  Access token used for the query. While you can pass this one to each component, we recommend wrapping components in the `AccessTokenProvider` instead:
</ParamField>

<ParamField path="refetchInterval" type={`number`}>
  Interval in milliseconds for refetching the data
</ParamField>

<ParamField path="retry" type={`boolean`}>
  Whether to retry on errors.
</ParamField>

<ParamField path="propelApiUrl" type={`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.
</ParamField>

<ParamField path="enabled" type={`boolean`}>
  When false, the component will not make any GraphQL requests, default is true.
</ParamField>