I’m making a Strapi plugin to help me import a dataset into my database. The dataset is on the server side. It is jpg and json files. One after another, the JPG get copied into Strapi’s
/public/uploads folder, and the json files are parsed and added to the database using strapi.query
The dataset takes several minutes to complete. While the importing is progressing, it looks like the UI has become unresponsive. To improve this UX, I would like to add a progress bar to the plugin’s control panel while the import is taking place.
The problem I am having is that I don’t know how to implement the logic on the server side which will be able to talk to the frontend and communicate the progress status.
So far, my control panel has an “import” button which creates a redux action. I use redux-saga to listen in on the import action, which begins a saga, making a request to my plugin’s
/import endpoint. My server-side controller starts the import, returning a Promise that resolves when the import is complete.
I’m struggling with the concepts of how everything ties together (strapi frontend, strapi backend, redux, react, sagas, etc.) I can’t explain how I want the server side to update the client side with progress data, because I don’t know how the server can communicate with the client.
Ideally, what I think I want to happen is that I get an event emitter from the server, rather than a Promise. The event emitter would spit out “progress” events with a percentage as payload, which gets dispatched by Redux which the React UI responds to.
I don’t think I can pass an event emitter from the server to the client. Websockets, maybe? I think I could do that, but I’d rather not introduce a dependency if there’s a simpler solution.
Another thought I had was that maybe I could create a second REST endpoint,
/progress, which the client can poll every
n seconds and receive progress reports. But that would require server-side state, and a subroutine in the controller which passes data from the
/import controller and the
/progress controller. If I’m introducing server side state, my instinct tells me that there’s already a module that exists that handles this use-case.
I’m in unknown territory as I am not sure what the recommended best practice would be for a progress bar like this. Or heck, maybe I’m doing something silly and my problem could be addressed using something much less complex. I’m curious to see what more seasoned devs would say about this. I would appreciate it, thank you.