Intro to the data store
The data store is the central hub for monitoring and managing all real-time data within your Wized project. It provides a comprehensive overview of the state of your application, allowing you to track and interact with variables, cookies, URL parameters, API requests, and other critical data points.
Why is the data store important?
Building a dynamic web application requires managing data efficiently. The data store simplifies this by providing a real time, centralized view of all data elements that power your app’s functionality. With it, you can:
- Monitor the live state of your application – Instantly see how variables, cookies, and other data points change as users interact with your site.
- Debug requests and logic efficiently – Track API requests and responses, validate authentication tokens, and detect errors in data flow.
- Optimize app behavior – Ensure that dynamic elements update correctly by checking their current values in real time.
- Simplify development – Use the data store as a workspace to experiment with different data configurations before implementing them in your app.
Navigating the data store
You can access the data store from the left sidebar by clicking on data store
. This opens a panel divided into two main sections:
1. General overview
This section provides a real time snapshot of all key data elements, including:
- Variables – All variables created within Wized, displayed with their current values.
- Navigation – Information about the current page and navigation-related data.
- Cookies – A complete list of cookies managed by your application, with their live values.
- Secrets – Securely stored values that can be used for authentication or API calls.
- Input fields & forms – Any input fields or forms detected on the current page (e.g., login forms, search bars), along with their current user-entered values.
Each subsection displays data as a list, where you can instantly see the current value of each item. These values update in real time, making it easy to test and refine logic configurations without leaving the dashboard.
Additionally, from this section, you can create new variables, cookies, secrets, and parameters directly, streamlining the setup of your application’s dynamic behavior.
2. Requests overview
This section lists all API requests created in Wized. Each request is displayed with its status and response details, allowing you to track and debug external data interactions. Next to each request, you will find three action buttons:
- Play – Manually trigger the request to test its execution.
- Preview – Open and edit the request configuration in the right panel.
- Expand – View real-time request details, including:
- Whether the request has been executed (
hasRequested
). - If the request is currently running (
isRequesting
). - The HTTP status (
status
andstatusText
). - Whether the request was successful (
ok
). - The received data (
data
). - The headers of the response (
headers
).
- Whether the request has been executed (
Before a request is executed, these properties will be null
or false
. Once triggered, they update in real time, allowing you to monitor its success and response data.
How to use the data store effectively
Debug your application:
- Check if variables, cookies, or parameters are updating as expected.
- Verify requests responses and diagnose issues if a request is failing.
Test real-time interactions:
- Modify variables and cookies on the fly to see how your app responds.
- Ensure that navigation-based data updates correctly.
Optimize API calls:
- Manually execute requests to test endpoints.
- Validate API responses before integrating them into your app logic.
Key takeaway
The data store is an essential tool for developing and debugging your Wized project. It provides live visibility into all critical data points, helping you build a more robust, responsive, and error-free application.
Make sure to explore the data store regularly while building your app—it’s the best way to stay in control of your data and ensure everything works as expected.