1. Install the Quill SDK
npm install @quillsql/node
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.
import { Quill } from "@quillsql/node";
const quill = new Quill({
privateKey: process.env.QULL_PRIVATE_KEY,
databaseConnectionString: process.env.POSTGRES_READ,
databaseType: "postgresql",
});
// "authenticateJWT" is your own pre-existing auth middleware
app.post("/quill", authenticateJWT, async (req, res) => {
// assuming user fetched via auth middleware has an userId
const { userId } = req.user;
const { metadata } = req.body;
const result = await quill.query({
tenants: [{ tenantField: "user_id", tenantIds: [userId] }]
metadata,
});
res.send(result);
});
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.
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.