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)

Last updated on January 17, 2023

Create Results Query