top of page

Data Management with Wix Code - Optimizing CRUD Operations in Wix Velo using Wix Data API

Updated: Dec 7, 2023

In the realm of computer programming, CRUD operations encompass four fundamental actions: Create, Read, Update, and Delete. The fundamental components of data management are these procedures. Furthermore, the term "CRUD" is occasionally used to refer to user interface principles that facilitate information viewing, searching, and editing via computer-based forms and reports. Although CRUD operations may be performed on both SQL and NoSQL databases, the main emphasis of this article is on CRUD activities performed on the Wix Velo platform.

As developers, it is essential to understand how these fundamental CRUD functions operate. The simplest way to grasp this in the context of Wix Velo is to experiment with the several built-in functions, including insert(), remove(), update(), and others. These functions are provided by Wix data API.


WIX Data API:

The Wix Data API is a powerful feature of the Wix platform that allows you to interact with and alter the database on your website. It can be used to carry out operations such as locating, adding, modifying, and eliminating data from your collections.


Here is an overview of the WIX Data API:

Collections: A structured set of data is referred to as a "collection" in the context of the Wix Data API. It is like a conventional database table. Fields in each collection specify the kinds of data that can be saved, much like columns in a table.

Fields: Within a collection, fields represent specific bits of data. They can hold various kinds of information and have specific data types (text, integer, date, etc.).

Using the API: The Wix Data module, which offers several ways to interact with collections and their data, can be used to access the API. Among the important functions that are accessible are wixData.query(), wixData .insert(), wixData .update(), and wixData .remove().

  1. Data Querying: By using the query() function, you can retrieve data from a collection by predetermined standards. To refine the results, use pagination, sorting, and filters.

  2. Asynchronous actions can be managed with the use of promises, which are returned by many of the Wix Data API's functions. This guarantees that database activities can be carried out without interfering with the execution of other code

  3. Error Handling: During database operations, errors may arise. The API offers techniques to address these failures. This involves utilizing the try-catch blocks in JavaScript to handle and catch exceptions.

  4. Access Control and Permissions: With Wix, you can control who may execute CRUD actions on collections by assigning permissions to them. This guarantees that private information is safeguarded and available to only those who are allowed.

Ready to Supercharge Your Wix Velo Skills? Embark on an Exciting Journey with our Velo for Beginners Course on Udemy! Discover the art of crafting dynamic websites and unleash your creativity. Join us here to elevate your Velo skills and unleash your website's potential!

Insert()

The wixData API provides the insert() function in Wix Velo, which lets you add a new record or item to a collection in your database. It needs two inputs: an object that represents the data you want to insert, and the name of the collection you want to add the item. In the video, there's a complete guide on how to use the insert method. You can also check it out here.




Syntax of Insert()


Breakdown of Parameters in Insert()

Collection Name (in the code, "CollectionExample"):

The collection name that the new item will be added to is specified by this option. The collection in this example is "CollectionExample". It's crucial to remember that your database has to have the collection already. If you don't have collection already, here is a tutorial to learn how to create collections.


Data Object (toInsert in the code): The data you wish to insert into the collection is included in the toInsert object. Each object's property has a corresponding field in the collection, and its value is the information you wish to store. The object in this code sample has the properties "firstName" and "LastName," with the values "John" and "Doe" corresponding to them.


INSERT Sample code to insert data

Promises are used in this code to facilitate asynchronous handling. The added item (referred to as item in this case) will be passed as an argument to the .then() block, which will run if the insertion is successful. A success message is then recorded to the console.

The .catch() block is executed if an error occurs during insertion. An error message is logged to the console by the error object, which is received as an input (called err).


A snapshot of output with the use of  insert () to insert data in collection
Item inserted in Collection

Key Advantages of insert() Method for Streamlined Data Management in Wix Velo



  1. Efficient Data Insertion via Wix Velo: Introducing the insert() function—a fundamental method to add records seamlessly into Wix Collections. Simplifying the process, insert() minimizes manual input complexities while expediting operations without compromising accuracy. Delve deeper into the realm of efficient data management with Wix Velo by exploring here.

  2. Efficient Bulk Data Incorporation: Seeking to add numerous records in one go? blukInsert() emerges as the hero. Streamlining batch insertion like never before! Discard the sluggish, one-by-one insertion processes—this method handles multiple records concurrently, significantly enhancing operational efficiency. For comprehensive insights into batch insertion, learn more here.

  3. Efficient Integration of Data: The insert() method streamlines the process of adding new records into your Wix database. Its user-friendly interface and seamless functionality simplify the task, eliminating the need for manual entry and significantly reducing the chances of errors.

  4. Elevated Performance and Scalability: Aiming for top-tier performance in your Wix application? Look no further than insert(). It elevates the pace of data addition, curbing latency and guaranteeing seamless scalability. Discover the full scope of Insert() and its functionalities in our comprehensive 'Velo for Beginners' course on Udemy. Enroll now to delve deeper into this feature and elevate your proficiency.

You can also insert the data with the specified ID : Here's how;

The output of the code where the user provided the Specific ID with data to insert.


A screenshot demonstrating the process of inserting data into a WIX Collection using the 'Insert()' method and ID
Data insertion in WIX Collection using 'Insert()' method and ID

Another way to insert data is to Insert an Item using data Items:


Here's the output that displays the insertion of data using data items.

Screenshot showing data insertion using data items in the outpuT
Output of data insertion using data items

Imagine you're putting together a puzzle and you find a missing piece. Well, the insert() function is like that magical glue that helps you connect one item to another. You can even use the ID of the item you want to refer to! It's like giving a little nod to another piece of the puzzle and saying, 'Hey, you belong here too!' How cool is that!




Now the successful insertion is done using the id of the item I wanted to refer to.

Screenshot displaying successful data insertion using item ID.
Successful data insertion by referencing the item ID.

Now here's an example of Inserting a reference to the item with ID () in the field of the item in the CollectionExample collection with the ID 002021.



UPDATE()

The update() function in Wix Velo is an essential feature that lets you edit records that are already in existence inside a collection in your database. With this function, you can change particular fields, add new data, or remove particular properties from a record. Promises are used to operate asynchronously, allowing code to continue running in the background while the update process takes place. In the video, there's a comprehensive guide on utilizing the update method. You can access it here .

You may dynamically manage and update data in real time using update(), giving users a responsive and interactive experience. To maintain data integrity and security in your application, it's crucial to remember that the current user must have the required permissions to carry out updates in the designated collection.

SYNTAX:

In the parameters of update here's the description of each item.

collectionName: The designation of the collection that will be updated.

itemID: The distinct ID of the object you wish to modify.

dataToUpdate: An object with the new values for the fields that need to be updated.

Example of how to use an update() method to update content collection in Wix Velo with WIX DATA API:


We can also use the data option to update the content in our collection


Why use the get method followed by update():

In database operations, it's usual practice to use get() and then update() for a few reasons:

  1. Preventing Data Loss: It's important to make sure that you don't unintentionally erase any current data when you update an item in a collection. You can retrieve the complete object, along with all of its properties, by first using get(). This lets you edit some fields while keeping the values of the other attributes the same.

  2. Selective Modification: You can obtain the object and change certain properties just by using the get() function. This is particularly crucial if you wish to modify an item's fields while keeping the remainder of the data unaltered.

  3. Real-Time Data Handling: Real-time data handling can be achieved by using get() and update(). This implies that you can update the item with the most recent information after retrieving the most recent data from the database and making any necessary modifications right away.

  4. Concurrency Control: It is conceivable for other users to be updating the same item at the same time in multi-user situations. You may make sure you're working with the most recent version of the object by using get() first. By doing this, conflicts are avoided and the most recent data is used to apply your adjustments.

Looking to master Wix Velo? Our Velo for Beginners Course on Udemy offers a step-by-step guide to harnessing Velo's capabilities for Mastering Velo. Join our course now and discover the magic of Velo!

Let's use the query() and update() functions to perform a clever database trick.

Think of it as transforming an object in your collection. Here's the thing, though: if you submit the modifications alone, you may unintentionally omit some crucial information! Here's the trick: we scope out the item using query() first, then we work our magic and make modifications, and lastly we use update() to seal the deal. In this manner, each tiny detail receives the attention it deserves!

Now we will see how to define a function using the update() method.

  1. Function: Defines a function called updateNameItem that updates a person's name in a database. It takes three arguments: the ID of the item, the new first name, and the new last name.

  2. Updating: Creates a structure (toUpdate) with the new first and last names, and then uses the wixData.update method to update the information in a collection (like a table in a database) for a specific item.


Remove()

For managing data on a Wix website, the remove() function in the Wix Data API is an essential function. It is employed to remove a single item or several things from a database collection. In the video, there's a detailed walkthrough demonstrating how to use the remove method effectively. You can watch the tutorial here to learn more about the remove functionality.

When you use the remove() function, it's like asking your website to clean up after itself. It promises to give you back the item it removed from your special collection. But here's the deal: if the current user doesn't have the 'delete' power for that collection, it might say, 'Sorry, can't do that!' and the promise won't come true.

Sample code for remove by providing ID:

Why is it important to use the remove() function?
  1. Keeping Things Organized: Do you know how occasionally you have to tidy up your data collection? The remove() function can be compared to a reliable organizer. It assists you in quickly organizing your database!

  2. Farewell, Bulk Errors: Imagine your database being overrun with obsolete information. Eliminating each one by hand? Thank you, but no! You can wave farewell to them all at once with remove(). It's comparable to a magic wand for mass removals!

  3. Purposeful Elimination: Sometimes, you need to get rid of not just one thing but also all the related stuff. Like when you want to say goodbye to a user's orders and comments at the same time. 'remove()' does that job without any trouble!

Let's explore creating a custom function 'delete' using remove() In this example, Feel free to try out the code in our sample;


Remove a reference.


Syntax

The removeReference() function is not supported for Single Item Collections.


This code uses the wixData.removeReference function to remove a reference from a specific field in a collection. Let's break down what it does:

  1. import wixData from 'wix-data'; : This line imports the wixData module, which provides access to data-related functions in Wix Velo.

  2. wixData.removeReference("CollectionExample", "field_id", "7ed80a3a-1f47-42b2-9895-03343516bca9", "895"): This line calls the removeReference function. Here's what each argument means:

  3. "CollectionExample": This is the name of the collection where the removal operation will take place.

  4. "field_id": This is the name of the field from which the reference will be removed.

  5. "7ed80a3a-1f47-42b2-9895-03343516bca9": This is the unique ID of the item that contains the reference.

  6. "895": This is the value that is being removed from the field.

  7. then(() => { console.log("Reference removed"); }): If the removal operation is successful, this code block will execute. It logs the message "Reference removed" to the console.

  8. catch((error) => { console.log(error); });: If there's an error during the removal process, this code block will execute. It logs the error message to the console.


And there you have it, developers, and makers of websites! We've been exploring Wix Velo's amazing CRUD operations universe, and it's been quite an adventure, haven't we? First, we learned how to use insert() to add new data. It's like sowing the seeds for the expansion of your website. Next, we looked at using update() to transform our data. It all comes down to staying current and exciting! Finally, we learned how to use remove() to clean up and maintain the efficiency of our database. Now that you have these strong tools at your disposal, you can create dynamic, interactive websites that manage data with ease.


Elevate your Wix Velo proficiency with our comprehensive Velo for Beginners Course on Udemy. Discover insider tips and techniques for crafting dynamic websites. Enroll in our course here to unleash the full potential of Velo.

Remember that maintaining the efficient operation of your website requires finding the ideal balance between adding, editing, and deleting material. So feel free to let your imagination run wild and let those CRUD operations do their magic! Your website is ready to be more visible than it has ever been.

214 views0 comments

Comentários


bottom of page