​
1. Install the Quill SDK

​
2. Create a new endpoint

Instantiate Quill with your credentials and add the below POST endpoint.

This example assumes you have an organization id on the user returned by your auth middleware. Queries will not work properly without the organization id.

​
3. Connect the frontend

You connect Quill to React with the QuillProvider component. 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.

In App.js, let’s wrap our React app with an QuillProvider. We suggest putting the QuillProvider somewhere high in your app, above any component that might need to access Quill data.

App.js
import { QuillProvider } from "@quillsql/react";
import Routes from "./Routes";
import UserContext from "./UserContext";

function App() {
  // Use your existing auth and user context
  const [user] = useContext(UserContext);

  return (
    <QuillProvider
      publicKey="YOUR_PUBLIC_KEY"
      queryEndpoint="https://yourserver.com/quill" // your POST endpoint
      queryHeaders={{
        // We'll pass these headers on every request to your endpoint
        Authorization: `Bearer ${user.jwt}`,
      }}
    >
      <Routes />
    </QuillProvider>
  );
}

See the QuillProvider API docs for more information.

Data Cache