Wasp•8mo ago

Do I have a way to use useLazyQuery ?

My app filters some data. I need to be able to refetch whenever the user clicks on "search" with the new filters. I also don't need to fetch when the form is not dirty. I tried this :

  const methods = useForm({ defaultValues });
  const filters = methods.watch();
  
  const {
    data: properties = [],
    isLoading,
    isFetching,
    refetch: filterProperties,
  } = useQuery(getProperties, filters, { enabled: false });

  const methods = useForm({ defaultValues });
  const filters = methods.watch();
  
  const {
    data: properties = [],
    isLoading,
    isFetching,
    refetch: filterProperties,
  } = useQuery(getProperties, filters, { enabled: false });

But when I use filterProperties in another component it doesn't filters with the right filters. Is it a problem with react-hook-form? Or is it a problem with useQuery?

2 Replies

kapa.ai•8mo ago

Hi @Estelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, Wasp currently uses the useQuery hook from react-query for data fetching. The useQuery hook in Wasp is a thin wrapper around the useQuery hook from react-query and it doesn't require you to supply the cache key as Wasp handles this for you automatically source (https://wasp-lang.dev/docs/data-model/operations/queries#the-usequery-hook-1). However, react-query does not provide a useLazyQuery hook like Apollo Client does. Instead, you can control the execution of the query by using the enabled option in the useQuery hook. If enabled is set to false, the query will not run automatically, but you can manually trigger it using the refetch function returned by useQuery. In your case, it seems like you're already using the enabled option correctly. The issue might be related to how you're using filterProperties in another component. If the filters value has changed in the other component, you might need to pass the new filters to the refetch function to ensure the query uses the updated filters. As for react-hook-form, it's hard to say without more context, but it's possible that the issue might be related to how you're watching and updating the filters value. You might need to ensure that the filters value is being updated correctly when the form values change. Please note that this is a general advice based on the provided knowledge sources and the common usage of react-query and react-hook-form. For a more specific solution, you might need to refer to the documentation of react-query, react-hook-form, and Wasp, or ask for help in their respective communities. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Estelle, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•8mo ago

Could you maybe share a bit more of your code? Maybe a complete example so I can test it out and see what's going on 🙂

Gaming

Programming

Do I have a way to use useLazyQuery ?