Add lazyQuery option

[krunaldodiya]

Currently we have to pass args as second param and have to manually check if args is not undefined

const {data} = useQuery(['post', postId]);

it would be better to have full control on when to trigger query like for example searching posts

const [searchPosts] = useLazyQuery('search_posts', searchPostsHandler);

searchPosts({
  variables: {
    post_id: 1
  }
})

[tannerlinsley]

Isn’t this the same as using the “manual“ option?

[krunaldodiya]

Yes, this was the main goal of the question to give more control on "how and when" to call useQuery

[tannerlinsley]

I see, you don't want to pass the variables until you want to call it. With that expectation, how would useLazyQuery know what data to fetch from the cache? How would it know when to update?

I am having a hard time seeing how this pattern would benefit from the same things that useQuery and the like do.

I'm going to turn this into a discussion so we can talk about the use cases more.

[krunaldodiya]

if i am not wrong, useQuery will automatically trigger when the props that is passed to it changes, this will make query too much depend on props, and handling this dynamically would be awkward too, for example:-

let say, i have list of country and foreach country i want to fetch cities of selected country

const fetchCities = useLazyQuery('get_cities_by_country_id')

{ countries.map(country => (
     <div>
        <div>{country.name}</div>
        <button onClick={() => fetchCities({variables: {country_id: country.id}})}></button>
     </div>
   )
)}

How would you do the same fetching using useQuery() ?

[tannerlinsley]

Well, right now you wouldn't, but your example poses another question, what would you be gaining by using useQuery here instead of just a usePromise? Without reliable up-front keys, there can't be any cache hydration and what you're left with is simply a one-off promise manager no?

[cherniavskii]

@krunaldodiya regarding your example - how about this https://codesandbox.io/s/serene-fermat-86bdj?file=/src/App.js ?

[tannerlinsley]

Yes, this is probably the best way to do what you're talking about. This way you can use the cache, which is almost the entire point (and best feature IMO) of the library ;)

[krunaldodiya]

Got it, seems like valid answer 👍