How to execute query on every click using useLazyQuery()
useLazyQuery uses the default network policy that of cache-first So I supposed your onClick function actually executes but because the returned value is what was in the cache, React notices no change in data as such the state is not updated since the returned data is what it already has that way no re-render and thing seem not to have changed. I suggest you should pass in a different network policy something like
const [sendQuery, { data, loading }] = useLazyQuery(GET_DIRECTION, { variables: queryVariables, fetchPolicy: "network-only" });This will mean you want the most recent information from your api hence basically no caching.You might also want to experiment on other option and see which one best suits youlike cache-and-network: you can find out a little more here understanding-apollo-fetch-policies
As per the docs, useLazyQuery accepts the parameter fetchPolicy.
const [lazyQuery, { data, loading }] = useLazyQuery(QUERY, { fetchPolicy: 'no-cache'});With fetchPolicy set to no-cache, the query's result is not stored in the cache.