Custom
If you have complex query or authentication requirements, you may prefer to deploy your own query engine to benefit from your existing authentication or custom query functionality. To achieve this, you'll need to transform Vizzly formatted queries, into Vizzly formatted results.
Vizzly queries and results
To integrate your custom query engine with Vizzly, we require you to implement the async runQueriesCallback
function.
We will call the runQueriesCallback
with an array of Vizzly formatted queries and an abort signal (opens in a new tab), and expect either an
array of Vizzly formatted results, or null
indicating something went wrong.
Learn more about Vizzly results here, and more about Vizzly queries here.
Frontend implementation
The frontend implementation differs slightly from the self-hosted implementation, as it requires you
to provide an async runQueriesCallback
function.
Here is an example of how to do that;
import Head from "next/head";
import Vizzly from "@vizzly/dashboard";
export default function Custom() {
return (
<>
<Head>
<title>Vizzly Studio custom query example</title>
</Head>
<header
style={{
marginBottom: "10px",
height: "45px",
background: "rgba(0, 0, 0, .8)",
}}
/>
<Vizzly.Dashboard
type="custom"
loadDataSetsCallback={async (identityConfig) => {
const response = await fetch(`/api/resolve-data-sets`, {
method: "post",
body: JSON.stringify({ dataSets: identityConfig.dataSets }),
});
if (response.ok) {
const dataSets = await response.json();
return dataSets;
}
}}
runQueriesCallback={async (queries) => {
const response = await fetch(`/api/create-results`, {
method: "post",
body: JSON.stringify({ queries }),
});
if (response.ok) {
const results = await response.json();
return results;
} else {
console.error(`Failed to run query.`);
return null;
}
}}
identityCallback={async () => {
const response = await fetch("/api/identity");
if (response.ok) {
const tokens = await response.json();
return tokens;
}
return null;
}}
/>
</>
);
}
See the Next JS example project (opens in a new tab)