When my app's data flow starts with a backend API request that triggers a Vue component using puppeteer, is there a way to transfer that data from Backend (express) to the vue component without requiring the Vue component to make an additional backend API call to fetch data?
I attempted calling a backend API from the launched component, however, this approach seemed more like a temporary fix rather than a permanent solution.
When using puppeteer, functions can be added to the window object using the exposeFunction method. These functions can then be called from within a Vue component to retrieve data from the backend.
For instance, in a scenario where the backend API request returns the data myData, you would include the following puppeteer code:
const page = await browser.newPage();
await page.exposeFunction('getRequestData', () => myData);
await page.goto("http://localhost/")
In the Vue component, you can execute the following code when the component is mounted:
this.data = await window.getRequestData();
If you require type definition for TypeScript compilation, you can use the following code snippet:
this.data = await (window as unknown as { getRequestData: () => Promise<myDataType> }).getRequestData();
Another approach to transmit information from puppeteer to vue.js involves utilizing custom events and event listeners.
For example, with vue3's composition syntax, the JavaScript segment of a Vue Single File Component could appear as follows:
const myData = ref<MyDataObject>()
window.addEventListener('custom:data', e => {
myData.value = (e as CustomEvent).detail;
})
A similar implementation in vue2 might resemble this:
...
data: {
myData: undefined
}
...
mounted: function() {
window.addEventListener('custom:data',e => {
this.myData = (e as CustomEvent).detail;
});
},
...
To trigger the event on the puppeteer side, use the evaluate method like so:
const myData = {} // data retrieved from the initial backend API request
const page = await browser.newPage();
// any other configuration required
await page.evaluate((data) => {
window.dispatchEvent(new CustomEvent('custom:data', {detail: data}));
}, myData)
I am facing a challenge while updating a react native project from version 0.63.3 to 0.67.0. When attempting to run npm run tsc, I encounter numerous errors indicating that the typescript packages are not compatible with their original packages. Here is a ...
When attempting to define extension methods in separate files and import them through a barrel file, the methods don't seem to be added to the prototype. The following approach works: import './rxjs-extensions/my-observable-extension-1'; i ...
Are there any methods for implementing selenium or a similar tool on Citrix web systems? I have been relying on pyautogui, but it seems to be quite ineffective by itself. Any suggestions on how to enhance pyautogui would be greatly appreciated. ...
Within a modal, I have set up a threejs scene with three point lights. All functions are exported from a separate file called three.ts to the modal component. The issue I am facing is that when I try to initialize DAT.GUI controls, they end up rendering ...
When I attempted to display the name 'John' using an inline template in a simple Vue example, I encountered the following error message: [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. ...
When I run TodoAppUI.js:15, I get an error saying "Uncaught ReferenceError: exports is not defined" In all my classes, I use the export keyword. For example: export class mysclass { public constructor(){} } Even though I have the proper syntax for impo ...
Running into an issue with my TypeScript code snippet where the mapped type is losing intersection type information inside the map(). type Foo = { foo: number }; type Bar = { bar: string }; const arr: Foo[] & Bar[] = [{ foo: 1, bar: 'bar' }] ...
Currently, I have set up two applications that are able to send real-time messages to each other using WebSocket, and also generate a random link using express.js. I have hosted both React apps on my VPS host and now I am looking to secure the WebSocket co ...
After spending more than a day searching on Google, I may not be using the right keywords to find the answer I need. Here is my current setup: I have an ExpressJS API running with pm2 on port 3000 An Angular 2 app being served via nginx Both of these a ...
Within my Angular2 application, I have a class that includes several properties which will be assigned values within components. @Injectable() export class Globals { private token: string; private authorization: string; private roleUser: boole ...
What I have learned to do: Save an image file from a source like imgur as a buffer and download it to disk Display an image on a page by uploading it from disk using elementHandle.uploadFile(path) However, this method only works locally on my machine. My ...
In my Angular 12 project, I am facing an issue with setting up unit tests that should capture errors from HTTP responses. However, when running the tests, instead of receiving the error as an actual error object, it is being passed within the response body ...
I am facing a situation where I need to upload both a .zip file and a .xlsx file to an endpoint simultaneously. On the client side (Angular 1): files.upload = Upload.upload({ url: '/api/files', data: { xlsxFile: xlsxFile, zipFile: zipFile } ...
Background In pursuit of my Free Code Camp back end certification, I am embarking on the task of creating a voting application. For detailed information and user stories required for this project, visit this link: Among the user stories is the ability to ...
Imagine a scenario where calling a REST endpoint triggers a server-side process that runs for an extended period: http://host/api/program/start The goal is to relay updates and output from this process on the server side to a client application. One app ...
I have a web application that allows users to upload PDF files. Once uploaded, the file needs to be converted into binary data in the backend without being saved in a temporary folder, so it can be stored in a database. While I am able to upload and read ...
I am trying to include the props (string) value in my scss file Within my component, I am using the nbColor prop with a value of 'warning'. I want to be able to use this value in my scss file where I have a class called .colorNb {color: color(nb ...
I am facing a unique issue while trying to incorporate the mqtt.js library into Angular 2 using TypeScript. Below is my app.component.ts file: import { Component } from '@angular/core'; import * as mqtt from 'mqtt'; @Component({ sel ...
My goal is to query an objectID from MongoDB using NodeJS and then retrieve it on my local host through http://localhost:3000/objectSearch?objectid= I've searched everywhere, but I can't seem to figure it out. If someone could provide me wi ...
Imagine having a set of conditions with different possible values and wanting to cover each potential case. In the event of adding a new condition in the future but forgetting to handle it, it is important to have an error detection mechanism—ideally cat ...