I have a form where users can update data. At the same time, an admin can update that same data.
In the user form I use useQuery. When the admin updates data, it sends a message through websockets to the user. The websocket hook on the user's side uses useLazyQuery to trigger it to update the user's form when an admin makes a change. However, useQuery and useLazyQuery seem to operate independently as far as I can tell even though they stem from the same builder. Both work perfectly fine independently.
The crux -> The isFetching is not triggered in useQuery when I trigger useLazyQuery.
How can I trigger useQuery to update the form data on the user's side when the websocket gets an update from the admin?
If you are sure you want to update the form data on the user's side by re-fetching the data from your API.
As described in the doc : https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-demand-with-refetchinitiate you can use refetch in useQuery.
const { data, refetch } = useGetPostsQuery(5)
Related
I am using Laravel Livewire, I currently have a form that captures a user's address information, then it needs to submit that to a 3rd party API (it's for billing information).
The issue that I am facing is that the UI doesnt update / livewire doesnt call render until after the entire method has run - which looks on the frontend like the UI is frozen / system isnt doing anything as the API is slow and takes a few seconds (15 - 20) to give a response.
I want to be able to trigger a browser event to display an alert saying the request is processing / show an alert banner on the page that it is processing before making the API request, process the API request, then display the results.
Currently I have identified the following ways to make this happen:
make the updates on the frontend, fire off an event with the data needed. Laravel event listener handles the API call, and emits a result event that the livewire component listens for, then the livewire component updates the page with the results.
make the updates on the frontend, dispatch a job to run in a queue worker, emit an event that the livewire component listens for, update the page with the results.
emit an event from the livewire component to itself, the livewire component then listens for that event and processes the API request, then updates the frontend with the results.
emit an event from the livewire component to itself to update the UI with processing info, while it still runs the API process in the original method call, and then updates the UI once the API gets a response
My thoughts are, what would be best practice here? All the above solutions require a different amount of work to get running, and solution 1 and 2 looks like complete overkill for such a simple process.
Does this come down to preference? Or is there actually a best practice way to do this in livewire?
And additionally, is there another way / simpler way to do this that I havnt mentioned above?
Your feedback is appreciated.
I would probably create a job and then return a response to the user. Then instigate Livewire polling that can check for the job being complete. If the API takes 15-20 seconds then polling once per second should be fine.
You might want to store the state in the database so that the job and the livewire component can communicate with each other. If you don't need to keep the data, using the cache to communicate between job and component would be a good alternative.
I'm working on a chat app, developed using Apollo GraphQL and React and I have the following issue:
I have a component called "Conversation" which is fetching an array of messages between two users (the logged-in user and other user) using the "useQuery" hook of Apollo which is invoked every time the component mounts.
When a new message is sent by the logged-in user, I'm updating the cached array of messages using the "writeQuery" function provided by Apollo.
By doing that, the "Conversation" component is getting re-rendered, which is leading to an unnecessary network request because the "useQuery" hook is triggered again.
I would love to hear if there is a way of preventing "writeQuery" from triggering a re-render to the relevant component.
Thanks a lot in advance!
I'm developing a real time chat app using graphql and I want to modify fetched data instead of refetch it again - in order to reduce unnecessary network requests.
When my app first init I'm fetching a list of users (that are not the current logged-in user) to display on the sidebar of the app.
Each user contains a lastMessage object that represent the last message that he sent or received.
When a user clicks on a user to chat with, another query is submitted in order to get all the messages between the users.
Using subscriptions, I'm updating the messages state when a new message is sent (either by the logged-in user or by the other user).
Now, I want to update the lastMessage object of the related user displayed on the sidebar, but I don't want to refetch all the users again in order to do so, because I have all the updated data in the client, which I received by the subscription event. Instead, I want to update the graphql queried data using js.
Is there a way to do that?
Thanks.
Apollo cache has a 'modify' method that you can use to set the cache of user's lastMessage.
Apollo docs for cache modify
I am creating an application with Laravel and VueJs. In this application a user can create an event. These events have participants. In my application the user fills out all of the event information and participants information and then clicks submit.
What I am looking for guidance on is how to best structure this in the backend. What I need to accomplish is the following:
create an event to the database
create participants
do an action based on the participants in the event (would happen in the event controller)
right now the way I have structured this is:
Send an axios post to create the event (EventController)
then send an axios post to create participants (ParticipantController)
then send another axios post to the event controller to do the last action (EventController)
this to me feels like way too many axios post calls, but I don't want to just put everything in one controller. Is there a better way to do what I am wanting to do while minimizing the number of axios calls?
if you need to create participants and perform particular action after event create then you can use laravel observers you can use it's created function to perform any action like after createing an event you have to make some enteries on participant table so you can perform those actions in that observer function.
I want to make an online DB based chat application. My problem is to detect changes in the DB, i.e. whenever a user sends a message to another user it should display to him. One approach is Ajax calls with setinterval but I want an instant solution. I do not want to keep the server busy with such Ajax calls.