Having trouble linking a sqlite file in your tauri + vue project?

After successfully installing tauri-plugin-sql by adding the specified content to src-tauri/Cargo.toml :

[dependencies.tauri-plugin-sql]
git = "https://github.com/tauri-apps/plugins-workspace"
branch = "v1"
features = ["sqlite"] # or "postgres", or "mysql"

I proceeded by adding the tauri-plugin using:

npm add https://github.com/tauri-apps/tauri-plugin-sql#v1

Next, I included the following content in main.rs :

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_sql::Builder::default().build())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Following that, I created a databaseService within the root folder of my vue js project :

import Database from "tauri-plugin-sql-api";

class DatabaseService {
  constructor() {
    // Initialize the database connection here if needed
  }

  async connectToDatabase() {
    try {
      // Connecting to sqlite with the path relative to `tauri::api::path::BaseDirectory::App`.
      return await Database.load("sqlite:./mydata.db");
      // Connection to mysql or postgres can also be established as required
    } catch (error) {
      console.error("Error connecting to database:", error);
      throw error;
    }
  }

  async executeQuery(query, params) {
    try {
      const db = await this.connectToDatabase();
      return await db.execute(query, params);
    } catch (error) {
      console.error("Error executing query:", error);
      throw error;
    }
  }
}

export default new DatabaseService();

Subsequently, I attempted some test queries:

<template>
    <div>
      <!-- Your component template -->
      <h1 class="text-black text-center text-lg font-black">{{ title }}</h1>
    </div>
  </template>
  
  <script>
  import DatabaseService from "../services/database";
  
  export default {
    // Component options
    async mounted() {
      try {
        // Example query
        const result = await DatabaseService.executeQuery(
            "SELECT * FROM barbers"
        );
        console.log("Query result:", result);
      } catch (error) {
        console.error("Error:", error);
      }
    },
  };
  </script>
  
  <style>
  /* Your component styles */
  </style>
  

However, an error was encountered:

databaseService.js:24 Error executing query: error returned from database: (code: 1) no such table: barbers

In spite of having the table, it appears there might be an issue with the path of the sqlite file. Should it be based on src-tauri or the vue project? Where should it be created and what path should I specify in databaseservice?

Answer №1

In order to properly locate the SQLite file within your Tauri application, it is important to specify its path relative to the application itself, rather than in your Vue.js project.

If you are encountering issues, it may be due to a mismatch between the contents of your `mydata.db` file and what is being referenced in your `databaseService` code. Could it be possible that there are multiple `mydata.db` files in your project? It's peculiar that you are not receiving an "Error connecting to database" message.

It seems like you are successfully establishing a connection to a database file, but that particular file does not contain the necessary `barbers` table. If this scenario resonates with your situation, I recommend verifying that there is only one `mydata.db` file present and that its path is correctly specified in relation to your Tauri setup as opposed to your Vue files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loop through a collection of arrays that contain the same elements, and multiply each consecutive element by a specified value x

I've been diving into a challenging problem involving remarkable numbers, which are defined as A number that is equal to the sum of all its proper divisors -- provided one of them is negative. For instance, the proper divisors of 12 are 1, 2, 3, 4, 6 ...

Is there a way to delay the start of an ajax function until a few moments after the user

Good evening, I am interested in implementing a new feature using Ajax. Specifically, I would like to introduce a delay of 2 seconds after the user finishes typing before triggering the search function, as opposed to using "onkeyup". Note: This modificati ...

Activate Cross-Origin Resource Sharing for GraphQL requests

Currently working on a project that involves graphQL and spring boot. The API functions properly when using graphiQL, but there's an issue with CORS origin error when trying to consume it with Apollo vueJS. In the ProductQuery class which implements ...

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

I'm currently utilizing file-saver within my Angular application to retrieve a PDF generated from the backend. The library functions smoothly on desktop and Android devices, but I'm encountering issues with downloading files on iOS. Contrary to w ...

Vue-material does not support using custom SVG icons with the md-src function

After creating a project with vue-cli, I decided to enhance it by running vue add vue-material. Next step was adding MdButton and checking it in the browser. // works just fine <md-button class="md-icon-button">button</md-button> Then, I dec ...

Arranging items by their total sum of arrays in React.js

I'm working with data.js where I have stored my JSON information. Here's a snippet: [ { name: 'Adam Doe', city: 'New York', mark: [8,10,10,10] }, { name: 'Catlyn Stronk', ...

The app in NextJs encounters layout issues on all pages due to a break in

I've developed a NextJs application using npx create-next-app and attempted to implement my own custom layout. However, this resulted in breaking the app unexpectedly without any clear reason. The project structure includes: components -> Footer.j ...

Having trouble with Ajax and facebox integration issues?

My website utilizes ajax jquery and facebox for interactive features. You can check out a demo here. The div with the ID "#content" contains links to other pages that open successfully using facebox. However, when I reload the content of this div using aj ...

Error in Quasar application: essential modules were not installed properly via npm

After creating a quasar app using quasar create and confirming it worked with quasar dev, I decided to upload the code to GitHub for collaboration. I created a repository and uploaded everything except for node_modules and package-lock.json. Next, I delet ...

Using Material UI with Reactjs for Background Image Mapping

I need some advice from everyone. I have an array of images and I've mapped the content, but for some reason I am unable to set a background image in the styles of a component. The other objects in the array are working as expected. {DlCards.map((mdlc ...

I would love to hear your suggestions for a custom select element plugin in jQuery

After browsing multiple options online, I decided to turn to the expertise of the Stack Overflow community to ask for recommendations based on personal experience. I am specifically in search of a plugin that can substitute a select element with a custo ...

What is the reason behind the failure to update the state via a reducer and Object.assign?

I'm attempting to develop a reducer without utilizing ES6. It's an outmoded PHP application that lacks a build process for transpilation. I am initializing the state: let defaultState = { accountTypes: { individual: { c ...

Tips for sending a form as a PDF attachment through email using Nodemailer, React, and Node.js

Imagine a scenario with a React form. Here's what I envision: fill out the form, click the submit button, and watch as the form magically generates a PDF that gets sent as an attachment via Nodemailer. Sure, I've successfully managed to send emai ...

Why does the response.json() method in the Fetch API return a JavaScript object instead of a JSON string?

After using Body.json() to read the response stream and parse it as JSON, I expected to receive a JSON string when I logged the jsonData. Instead, I received a Javascript object. Shouldn't jsonData return a JSON string until we call JSON.parse() to co ...

Angular animations are failing to function in the Visual Studio 2017 template

I am facing a challenge with incorporating animations in Angular 2 using Visual Studio 2017. I believe there must be a simple solution that I am overlooking at the moment. My goal is to animate certain elements and I have been testing the animations by tri ...

The margin-top property in CSS is not functioning as intended for a specific pixel value when applied to

I'm having trouble with positioning an icon using margin-top: -35px; under #menu. When I click on the icon, the side navigation bar doesn't work properly. However, if I adjust it to -15px, the side navigation bar displays correctly. Can someone h ...

Manipulating images live with options for scaling, resizing, and cropping

I am currently developing a content management system that allows users to upload images and attach them to different sections of the pages. My goal is to find a user-friendly, preferably jQuery-based plugin for resizing images before they are cropped. A ...

Can you please provide a step-by-step guide for using socket.io with TypeScript and webpack, after installing it

Currently, I am experimenting with TypeScript in conjunction with node.js, socket.io, and webpack. To facilitate this setup, I have configured the webpack.config.js, tsconfig.json, and tsd.json files. Additionally, I acquired the typings file for socket.i ...

Is it possible to make a link_to, which is essentially a normal <a href>, clickable through a div that is also clickable?

I am currently dealing with a clickable div element which has a collapse functionality, and there is also a link placed on top of it: <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-h ...

Verify whether the chosen options from a dropdown list coincide with a predetermined value

I am working with a form that generates dropdown lists dynamically. <c:forEach var="companyList" items="${company.detailList}" varStatus="status"> <tr> <td>c:out value="${companyList.employeeName}" /></td> <td> <select ...