[SOLVED] ReactJS Live Queries not triggering function

Moralis General
#1

Hi, I am currently following the Rarible Clone tutorial, and I am using ReactJS as a framework.

I have an issue on the Create event.

Here’s my code:

image
image819×439 35.8 KB

And if I use this code

subscription.on('create', (object) => {
  console.log('object created');
});

It’s not logging the “object created” but in the server the event is being created.

#2

Check the spelling of your table name. The tutorial repo uses SoldItems. The name in the query must match.

#3

I changed it to ItemSold and it already has values.

#4

Live queries rock so much!! YEAH! I love Moralis more and more! Thank you for providing this awesome tool!

For future readers trying to implement live queries with React using Functional Components, here is my working code:

useEffect(async () => {
    fetchYourData();
    let query = new Moralis.Query("Data");
    let subscription = await query.subscribe();
    subscription.on("create", fetchYourData);
    subscription.on("update", fetchYourData);
    subscription.on("delete", fetchYourData);
  }, []);

This will subscribe to any create, update or delete event of the Data-Table. Yes, you can subscribe to multiple events. I know, it is freaking awesome right!

Place the subscription inside useEffect, make the function async (!), and pass your data-fetching function as a callback to the subscription => BOOOM! there you go! live reloading your sexy React UI. :star_struck:

3 Likes
#5

Thank you so much for this Thomas!

2 Likes
#6

Update here :wink:
as I gathered a little more understanding of react by now, you would wrap all the code into its own function and then call it inside useEffect. So it would rather look more something like this:

useEffect(() => {
   const subscribeToData = async () => {
    fetchYourData();
    let query = new Moralis.Query("Data");
    let subscription = await query.subscribe();
    subscription.on("create", fetchYourData);
    subscription.on("update", fetchYourData);
    subscription.on("delete", fetchYourData);
}

subscribeToData();
  }, []);

I encountered that subscription does not work properly anymore since I last touched this project. The action, create, update or delete, is sent and data in the backend is manipulated correctly, but the subscription does not seem to work reliably any longer. Can anyone here confirm they are having the same issue?

#7

Nothing works on that subscription?
You can try more events and log to see if something triggers.

#8

I can see the request being made correctly in the network tab.
When I refresh the app, the UI shows the correct new state of the value. But the subscription does not always work correctly. Can this be related to a free plan server?
Here is my exact code of the subscription:

useEffect(() => {
    const listenForUpdates = async () => {
      fetchAllPosts();
      let query = new Moralis.Query("Posts");
      let subscription = await query.subscribe();
      subscription.on("create", fetchAllPosts);
      subscription.on("update", fetchAllPosts);
      subscription.on("delete", fetchAllPosts);
    };

    listenForUpdates();
  }, []);

am using “moralis”: “^1.7.0”, and “react-moralis”: “^1.3.5”,

Am a little sceptic about updating, as it comes with many breaking changes starting with v. 2.0

#9

You don’t have to update to version 2, version 2 doesn’t work with react.

It doesn’t depend on the plan.

You could add some dependencies in that use effect like isInitialized so that it runs after the initialization finished

1 Like
#10

thanks, looks like this is working as expected now. :pray:

1 Like