Skip to main content

Documentation Index

Fetch the complete documentation index at: https://quill.co/docs/llms.txt

Use this file to discover all available pages before exploring further.

App.tsx
import { QuillProvider } from "@quillsql/react";

function App() {
  return (
    <QuillProvider
      publicKey={process.env.QUILL_PUBLIC_KEY}
      tenants={[
        { tenantField: "customer_id", tenantIds: [user.organizationId] },
      ]}
    >
      {children}
    </QuillProvider>
  );
}
The quill provider allows all the quill components in your app to share information which lets your dashboards render fast and update dynamically. Similar to React’s Context.Provider, QuillProvider wraps your React app and places Quill Client on the context, enabling you to access it from anywhere in your component tree. We suggest putting the QuillProvider somewhere high in your app, above any component that might need to access your quill data.

​
With tenants

If you’re using Quill Cloud, pass your publicKey and the current viewer’s tenant identifiers and the Quill Provider will connect to the hosted Quill Cloud automatically.
With tenants
<QuillProvider
  publicKey={process.env.QUILL_PUBLIC_KEY}
  tenants={[{ tenantField: "customer_id", tenantIds: [user.organizationId] }]}
>
  {children}
</QuillProvider>

​
With queryEndpoint

If you’re self-hosting Quill, point the Quill Provider to the location of the server running the Quill SDK. You may also pass a map of query headers that will be forwarded to your server with every request Quill sends. This can be useful if the /quill endpoint is behind a preexisting auth middleware.
With queryEndpoint
<QuillProvider
  publicKey={process.env.QUILL_PUBLIC_KEY}
  queryEndpoint="https://yourdomain.com/quill"
  queryHeaders={{}}
>
  {children}
</QuillProvider>

​
Props

​
publicKey
string
required
The public Quill API key. This can be found in the Quill BI Platform by clicking “Manage” on an environment in the environment dropdown -> “Copy public key”.
​
environment
string
The environment this app is running in (eg. “production”).
​
tenants
Array<{ tenantField: string; tenantIds: (string | number)[] }>
The tenants the current viewer can see data for. Required when using Quill Cloud (i.e. when no queryEndpoint is passed). When self-hosting, pass tenants here on the frontend or apply them on the backend in your server SDK call — but not both.Each entry pairs a tenantField (the column on your tables that identifies a tenant, e.g. "customer_id") with one or more tenantIds the viewer is authorized to see.
​
queryEndpoint
string
The url of your self-hosted server running the quill server SDK, if any.
​
queryHeaders
object
Additional query headers passed along with all requests to the custom query endpoint, if any.
​
withCredentials
boolean
Whether to include credentials with requests to the query endpoint.
​
theme
QuillTheme
A custom theme used throughout your dashboard.
​
children
ReactNode
The children of the provider. This is usually the rest of your app.