Docs

Retrieving Data from Dexie Cloud

In this guide, we'll walk you through how to retrieve data from Dexie Cloud and incorporate it in your grid with live synchronization.

Configure Dexie Cloud

First, you'll want to create your database:

npx dexie-cloud create

Secondly, whitelist your app origins(s):

npx dexie-cloud whitelist http://localhost:YOUR_PORT_NUMBER

Last, upgrade dexie and install the dexie-cloud-addon

npm install dexie@latest
npm install dexie-cloud-addon
Top

Connecting to Dexie Cloud

If you want to populate your grid using data stored in Dexie Cloud, we'll configure the grid through <zg-param>.

First, set the adapter <zg-param> to "dexieCloud".

Then, use the dataTable <zg-param> to specify the data table to retrieve.

If you want your grids to synchronize across tabs, windows, browsers, computers, etc, you can also include the subscription <zg-param>.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dexie.js ZingGrid</title>
  <!-- ZingGrid -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <!-- Dexie -->
  <script src="https://unpkg.com/dexie@3.2.2/dist/dexie.min.js"></script>
  <!-- Main Script -->
  <script src="main.js" type="module"></script>
</head>
<body>
  <zing-grid title="Dexie Grid" editor-controls>
    <zg-data adapter="dexieCloud">
      <zg-param name="dataTable" value="employees"></zg-param>
      <zg-param name="subscription" value="true"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="first_name"></zg-column>
      <zg-column index="last_name"></zg-column>
      <zg-column index="title"></zg-column>
    </zg-colgroup>
  </zing-grid>
</body>
</html>
Attribute Description
adapter Shortcut to set options for third party dataset. For graphQL, the following are set:restmode: Set to "manual" to turn off traditional REST URL construction and method setting (for custom REST configuration). method: Overwrite the request type for actions. GraphQL only accepts GET or POST requests.
dataTable Specifies the data table to retrieve.
subscription Set true to enable grid synchronization.
Top

Setting up Dexie Cloud

First you'll need to import Dexie, its cloud add-on, and liveQuery (allows live synchronization across our grids).

import Dexie from 'dexie';
import dexieCloud from 'dexie-cloud-addon';
import { liveQuery } from 'dexie';

Then, you'll need to create the Dexie database, which we'll call "EmployeeDB".

const db = new Dexie('EmployeeDB', { addons: [dexieCloud] });

We'll create a store for our table and specify the same columns we gave to our grid.

db.version(1).stores({
  employees: '@id, first_name, last_name, title',
});

After, we'll point the database to the cloud endpoint. This value could be found in dexie-cloud.json under "dblUrl".

db.cloud.configure({
  databaseUrl: 'https://zaojoytna.dexie.cloud',
});

We'll need to register both the clients to ZingGrid.

ZingGrid.registerClient(db);
ZingGrid.registerClient(liveQuery, 'subscription');

Lastly, we will sync the database with the cloud.

db.cloud.sync();

Altogether, it should look like this:

import Dexie from 'dexie';
import dexieCloud from 'dexie-cloud-addon';
import { liveQuery } from 'dexie';

const db = new Dexie('EmployeeDB', { addons: [dexieCloud] });

db.version(1).stores({
  employees: '@id, first_name, last_name, title',
});

db.cloud.configure({
  databaseUrl: 'https://zaojoytna.dexie.cloud',
});

ZingGrid.registerClient(db);
ZingGrid.registerClient(liveQuery, 'subscription');

// Sync with Dexie Cloud
db.cloud.sync();

For more details on connecting ZingGrid to your Dexie Cloud data source, check out the article here.

Top

[data: dexie cloud]