How can I "wait" before invoking the useEcho hook?

As you might gather from the title, I'm writing a Vue 3 app with a Laravel backend, using Echo for my websockets. But I'm running into an issue: the channel I want to subscribe to incorporates an ID that I don't necessarily have at the moment the useEcho hook is invoked. See below:

useEcho(
  `user.${userStore.user.id}`, // <-- userStore.user is null until it the user is fetched
  '.image.upscaled',
  (event) => console.log(event)
);

Is there a way I can "delay" setting up the channel name until I have the ID I need?

Thanks!

PS: I've tried making the channel name computed -- this just seems to break it.

vincent15000

10 months ago

Level 63

Not tried, but you can probably put this code inside a watcher and for each modification of the watched value, stop listening to the previous websocket and start listening to the new websocket.

But I would do another way.

Assuming the id is the auth user id, you can execute the useEcho code once the auth user is loaded.

yamoshi1

9 months ago

Level 1

Have you found a solution for this?

Please or to participate in this conversation.