Automatic updates with dependencies react

Moralis General
#1

I am confused about the automatic update

My understanding is that this helps to fetch data from my db and display in the fron-end whenever I change the value

example here i am fetching data that likes value = 0

image
image1360×768 83.8 KB

code

const Markets = () => {
    const [likes, seTlikes] = useState(0)
   
    const { fetch, data, error, isLoading} = useMoralisQuery("OrderList", query=>
    query. equalTo('likes', likes),
    
  
    )
      console.log(likes)
    if(error){
        return <h1>pls  recheck your data</h1>
    }

    if(isLoading){
       
        return "hellow" 
    }
    console.log(data)
     
    return <Container>
    
    <Input  placeholder="search based by like numbers" 
        value={likes}
        onChange={(e) => seTlikes(e.target.value)}
    />
    <Button onClick ={() => fetch}>  change value</Button>
    
      {data.map(item =>(
          
        <Containers key={item.id}>
           
            <Payments> {item.attributes.payment }</Payments>
            <Amount>{item.attributes.amount}</Amount>
            <Rate>{item.attributes.price}</Rate>
            <OrderId>{item.id}</OrderId>
             <Likes>likes:{item.attributes.likes}</Likes>
        </Containers>
      ))}

      <h1>{likes}</h1>
    </Container>
}

**when i add dependecies for auto refetch
does not show any data to front-end
**
code

const [likes, seTlikes] = useState(0)
   
    const { fetch, data, error, isLoading} = useMoralisQuery("OrderList", query=>
    query. equalTo('likes', likes),
    
  [likes]
    )

returns

image
image1360×768 61.1 KB

5 is hard coded

#2

my expectation would be that when you click on that button, it will try to fetch the data

#3

yes me too but when i click no thing happens

#4

When you remove that dependency it works when you press the button?

#5

when i remove dependecies and press button nothing happen even reloading

#6

according to the information i read in the documentation these auto updates works on a special event like onCreate etc

do not apply to front-end changes

correct me if I am wrong

#7

To enable updates on events you need to add live: true

#8

Change it to:

<Button onClick ={() => fetch()}> change value</Button>
#9

ok but me all i need is to update Ui data every time i change the value
An example is that the user should be able to filter data using the search form

#10

changed to

const { fetch, data, error, isLoading} = useMoralisQuery("OrderList", query=>
    query. equalTo('likes', likes),
     [likes],
    { autoFetch: false },
  
    )
      console.log(likes)
    console.log(data)
     
    return <Container>
    
    <Input  placeholder="search based by like numbers" 
        value={likes}
        onChange={(e) => seTlikes(e.target.value)}
    />
    <Button disabled={isLoading} onClick ={() => fetch()}>  change value</Button>

when I click the fetch button it’s returns empty array’s at console and nothing shows up

image
image1360×768 62.6 KB

empty arrays