{"id":4291,"date":"2022-06-30T18:06:10","date_gmt":"2022-06-30T18:06:10","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4291"},"modified":"2022-06-30T18:06:10","modified_gmt":"2022-06-30T18:06:10","slug":"using-harperdb-in-your-ionic-app","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app","title":{"rendered":"Using HarperDB in your Ionic App"},"content":{"rendered":"<p>Something I like to do is evaluate various Database services to see what the latest and greatest offerings are. One name that came up in my research was HarperDB. HarperDB is a distributed SQL\/NoSQL database with a built-in HTTP API, that can be deployed anywhere from edge to cloud. To stretch my SQL-muscles a bit, I decided to check out HarperDB and see what it was all about. We&#8217;ll build a basic app that performs all the standard CRUD operations (create, read, update, delete) and see what it&#8217;s like working with HarperDB.<\/p>\n<p><!--more--><\/p>\n<h2>Creating your Database<\/h2>\n<p>To get started, you first need to create an account on HarperDB, and create an organization for your account. Once created, you can spin up a new HarperDB Cloud Instance from your dashboard.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-1024x502.png\" alt=\"\" class=\"alignnone size-large wp-image-4292 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-1024x502.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-300x147.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-768x377.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-1536x753.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview.png 1986w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/502;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-1024x502.png\" alt=\"\" class=\"alignnone size-large wp-image-4292\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-1024x502.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-300x147.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-768x377.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview-1536x753.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/dashboard-overview.png 1986w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/p>\n<p>Clicking &#8220;Create New Cloud Instance&#8221; will open a dialog and prompt you to pick either a locally installed instance, or an instance with AWS or Verizon Wavelength. For mine, I selected AWS, and just left the rest of the options set to their default value.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-1024x498.png\" alt=\"\" class=\"alignnone size-large wp-image-4293 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-1024x498.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-300x146.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-768x374.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-1536x747.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type.png 1986w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/498;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-1024x498.png\" alt=\"\" class=\"alignnone size-large wp-image-4293\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-1024x498.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-300x146.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-768x374.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type-1536x747.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/instance_type.png 1986w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/p>\n<p>What&#8217;s nice is that HarperDB lets you create a single tier for free in order to evaluate the service. Once your instance has been created and spun up, you can select it, and we can begin to make our first schema and table.<\/p>\n<p>Our schema is basically where we can store the various tables we can interact with. I&#8217;ll call this schema &#8220;projects&#8221; and then create a table in it called &#8220;tasks&#8221;.<\/p>\n<p>When you create a new table, you&#8217;ll be prompted to enter a name, and also a hashing attribute. The hashing attribute will be a property on our data that will be randomly generated, and will be unique to each entry.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"350\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-1024x350.png\" alt=\"\" class=\"alignnone size-large wp-image-4294 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-1024x350.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-300x102.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-768x262.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-1536x524.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables.png 1986w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/350;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"350\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-1024x350.png\" alt=\"\" class=\"alignnone size-large wp-image-4294\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-1024x350.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-300x102.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-768x262.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables-1536x524.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/schema-and-tables.png 1986w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/p>\n<p>With the table created, we can focus on building out our app to add data.<\/p>\n<h2>The App<\/h2>\n<p>Our app will be a simple React app, so let&#8217;s create that.<\/p>\n<pre><code class=\"language-shell\">ionic start harper-app blank --type react\ncd harper-app\n<\/code><\/pre>\n<p>With our project created, we first need to create a Provider for our app in order to make our lives a bit easier. The actual details here aren&#8217;t <em>too<\/em> important, so I won&#8217;t be going over it in details. But in summary, we&#8217;re providing the instance URL and login information for our app in our provider, then creating a hook in order to perform our queries against the database.<\/p>\n<pre><code class=\"language-tsx\">import { createContext, useContext, useCallback } from &#039;react&#039;;\n\nexport type HarperDBContextType = {\n  url: string;\n  user: string;\n  password: string;\n};\nexport type HarperDBProviderProps = {\n  url: string;\n  user: string;\n  password: string;\n  children: JSX.Element;\n};\nexport const HarperDBContext = createContext&lt;Partial&lt;HarperDBContextType&gt;&gt;({});\n\nexport const HarperDBProvider = ({ url, user, password, children }: HarperDBProviderProps) =&gt; {\n  return (\n    &lt;HarperDBContext.Provider value={{ user, password, url }}&gt;\n      {children}\n    &lt;\/HarperDBContext.Provider&gt;\n  );\n};\nexport function useHarper() {\n  const { url, user, password } = useContext(HarperDBContext);\n  let abortController: AbortController;\n\n  const executeQuery = useCallback(\n    async ({ stringifiedQuery, signal }) =&gt; {\n      try {\n        const request = await fetch(`${url}`, {\n          method: &#039;POST&#039;,\n          signal,\n          body: stringifiedQuery,\n          headers: {\n            &#039;Content-Type&#039;: &#039;application\/json&#039;,\n            authorization: `Basic ${btoa(`${user}:${password}`)}`,\n          },\n        });\n\n        const json = await request.json();\n        const response = json.body || json;\n\n        if (response.error) {\n          return { error: response.message };\n        }\n\n        return { data: response };\n      } catch (e: any) {\n        return { error: e.message };\n      }\n    },\n    [url, user, password]\n  );\n  const execute = async (sqlQuery: { operation: string; sql: string }) =&gt; {\n    abortController = new AbortController();\n    const queryBody = JSON.stringify(sqlQuery);\n    const response = await executeQuery({\n      stringifiedQuery: queryBody,\n      signal: abortController.signal,\n    });\n    return response;\n  };\n  return { execute };\n}\n<\/code><\/pre>\n<p>With this in place, we can import it in our <code>index.tsx<\/code> and set the props on the provider.<\/p>\n<pre><code class=\"language-tsx\">import { HarperDBProvider } from &#039;.\/harper-provider&#039;;\nconst url = process.env.react_app_url!;\nconst userName = process.env.react_app_username!;\nconst password = process.env.react_app_password!;\n\nReactDOM.render(\n  &lt;React.StrictMode&gt;\n    &lt;HarperDBProvider url={url} user={userName} password={password}&gt;\n      &lt;App \/&gt;\n    &lt;\/HarperDBProvider&gt;\n  &lt;\/React.StrictMode&gt;,\n  document.getElementById(&#039;root&#039;)\n);\n<\/code><\/pre>\n<p>Here I&#8217;m providing the URL, username, and password via environment variable, but a much more secure approach is recommend. Having this in place we can now make our requests using the <code>execute<\/code> function from our <code>useHarper<\/code> hook. So let&#8217;s add that functionality.<\/p>\n<p>In <code>src\/pages\/Home.tsx<\/code>, let&#8217;s import the hook, and get a hold of the <code>execute<\/code> function.<\/p>\n<pre><code class=\"language-tsx\">const Home: React.FC = () =&gt; {\n  const { execute } = useHarper();\n  const [state, setState] = useState({ data: [], isLoading: true });\n\n  return (...)\n}\n<\/code><\/pre>\n<p>The <code>execute<\/code> function will allow us to pass our queries and request the appropriate data we need for our app. We&#8217;ve also included some state here in order to store that data once it&#8217;s been fetched. To request the data, we can use the <code>useIonViewDidEnter<\/code> hook, and create a <code>loadData<\/code> function that will get called.<\/p>\n<pre><code class=\"language-ts\">  useIonViewDidEnter(() =&gt; {\n    loadData();\n  });\n  const loadData = async () =&gt; {\n    const { data } = await execute({\n      operation: &#039;sql&#039;,\n      sql: `SELECT * FROM project.tasks`,\n    });\n    setState({ data, isLoading: false });\n  };\n<\/code><\/pre>\n<p>Here, <code>loadData<\/code> is calling <code>execute<\/code>, and we pass along an object with the type of operation we want to perform. Since I want to work with SQL, I&#8217;ll set the operation to <code>sql<\/code>, and then provide the correct SQL statement. Since the home page is where we&#8217;ll want to display all of the entries, we can use <code>SELECT * FROM project.tasks<\/code>. It&#8217;s worth mentioning that the casing of the SQL statements does not matter, which is something I learned along the way \ud83d\ude43.<\/p>\n<p>Once the data has been loaded, we can set it on our state, and then render it out<\/p>\n<pre><code class=\"language-tsx\">const Home: React.FC = () =&gt; {\n  const { execute } = useHarper();\n  const [state, setState] = useState({ data: [], isLoading: true });\n\n  useIonViewDidEnter(() =&gt; {\n    loadData();\n  });\n  const loadData = async () =&gt; {\n    const { data } = await execute({\n      operation: &#039;sql&#039;,\n      sql: `SELECT * FROM project.tasks`,\n    });\n    setState({ data, isLoading: false });\n  };\n  return (\n    &lt;IonPage&gt;\n        &lt;IonContent&gt;\n            &lt;pre&gt;{JSON.stringify(data, null 2)}&lt;\/pre&gt;\n        &lt;\/IonContent&gt;\n    &lt;\/IonPage&gt;\n  )\n}\n<\/code><\/pre>\n<p>From here on out, it&#8217;s standard SQL-practice for performing updates to your data. Meaning, if you know a bit of SQL, you should feel right at home with HarperDB.<\/p>\n<h2>Parting Thoughts<\/h2>\n<p>For a simple demo project like this, HarperDB <em>might<\/em> be overkill, but if you are building an app that needs a fast Database and a flexible API, HarperDB is a fantastic solution. Having the full power of SQL will help keep a consistent structure for larger apps, but there&#8217;s also the flexibility of NoSQL if that is how you prefer to work. And for those who are security minded, there&#8217;s a role-based, attribute-level security model in place to make sure only the correct users can access your data.<\/p>\n<p>If you&#8217;re interested in seeing the app and exploring HarperDB more, <a href=\"https:\/\/github.com\/mhartington\/ionic-react-harper\">here&#8217;s the link to my repo<\/a>. All you need is a new instance from Harper Studio and you can explore how everything works for your self!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Something I like to do is evaluate various Database services to see what the latest and greatest offerings are. One name that came up in my research was HarperDB. HarperDB is a distributed SQL\/NoSQL database with a built-in HTTP API, that can be deployed anywhere from edge to cloud. To stretch my SQL-muscles a bit, [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":4295,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"28","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"549204","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/using-harperdb-in-your-ionic-app\/224673","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[254,251,136,253],"class_list":["post-4291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-harperdb","tag-ionic-react","tag-react","tag-sql"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using HarperDB in your Ionic App - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Learn how you can incorporate HarperDB, a popular distributed database solution into your Ionic React mobile app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using HarperDB in your Ionic App\" \/>\n<meta property=\"og:description\" content=\"Learn how you can incorporate HarperDB, a popular distributed database solution into your Ionic React mobile app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T18:06:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Using HarperDB in your Ionic App\",\"datePublished\":\"2022-06-30T18:06:10+00:00\",\"dateModified\":\"2022-06-30T18:06:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app\"},\"wordCount\":782,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png\",\"keywords\":[\"HarperDB\",\"Ionic React\",\"react\",\"SQL\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app\",\"url\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app\",\"name\":\"Using HarperDB in your Ionic App - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png\",\"datePublished\":\"2022-06-30T18:06:10+00:00\",\"dateModified\":\"2022-06-30T18:06:10+00:00\",\"description\":\"Learn how you can incorporate HarperDB, a popular distributed database solution into your Ionic React mobile app.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using HarperDB in your Ionic App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using HarperDB in your Ionic App - Ionic Blog","description":"Learn how you can incorporate HarperDB, a popular distributed database solution into your Ionic React mobile app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app","og_locale":"en_US","og_type":"article","og_title":"Using HarperDB in your Ionic App","og_description":"Learn how you can incorporate HarperDB, a popular distributed database solution into your Ionic React mobile app.","og_url":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app","og_site_name":"Ionic Blog","article_published_time":"2022-06-30T18:06:10+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png","type":"image\/png"}],"author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Using HarperDB in your Ionic App","datePublished":"2022-06-30T18:06:10+00:00","dateModified":"2022-06-30T18:06:10+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app"},"wordCount":782,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png","keywords":["HarperDB","Ionic React","react","SQL"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app","url":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app","name":"Using HarperDB in your Ionic App - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png","datePublished":"2022-06-30T18:06:10+00:00","dateModified":"2022-06-30T18:06:10+00:00","description":"Learn how you can incorporate HarperDB, a popular distributed database solution into your Ionic React mobile app.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/using-harperdb-in-your-ionic-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Using HarperDB in your Ionic App"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/06\/ionic-harperdb-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4291"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4291\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4295"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}