Wasp•3mo ago

How could i run a query funciton on button click

I have the following code^. right now the getFilteredProducts query is ran everytime the page relaods or something happens. I only want it to be ran once when the button is clicked.

 const [formValues, setFormValues] = useState({
    minimaleOmzet: '',
    maximaleOmzet: '',
    minimalePrijs: '',
    maximalePrijs: '',
    minimaleZoekvolume: '',
    maximaalAantalConcurrenten: '',
  });

  const { data, isLoading, error } = useQuery(getFilteredProducts, {
    minPrice: 10,
    maxPrice: 100,
    minRevenue: 500,
    maxRevenue: 5000
  })
  console.log(data)


  const handleChange = (e: any) => {
    const { name, value } = e.target;
    setFormValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  const handleSubmit = () => {
    console.log('Form Values:', formValues);

    
  };

 const [formValues, setFormValues] = useState({
    minimaleOmzet: '',
    maximaleOmzet: '',
    minimalePrijs: '',
    maximalePrijs: '',
    minimaleZoekvolume: '',
    maximaalAantalConcurrenten: '',
  });

  const { data, isLoading, error } = useQuery(getFilteredProducts, {
    minPrice: 10,
    maxPrice: 100,
    minRevenue: 500,
    maxRevenue: 5000
  })
  console.log(data)


  const handleChange = (e: any) => {
    const { name, value } = e.target;
    setFormValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  const handleSubmit = () => {
    console.log('Form Values:', formValues);

    
  };

5 Replies

kapa.ai•3mo ago

Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In your case, you should not use the useQuery hook directly in the component body if you want to trigger it conditionally. Instead, you can use the query function directly in your handleSubmit function. Here's how you can modify your handleSubmit function:

const handleSubmit = async () => {
  console.log('Form Values:', formValues);
  const data = await getFilteredProducts({
    minPrice: 10,
    maxPrice: 100,
    minRevenue: 500,
    maxRevenue: 5000
  });
  console.log(data);
};

const handleSubmit = async () => {
  console.log('Form Values:', formValues);
  const data = await getFilteredProducts({
    minPrice: 10,
    maxPrice: 100,
    minRevenue: 500,
    maxRevenue: 5000
  });
  console.log(data);
};

In this case, the getFilteredProducts query will only be executed when the handleSubmit function is called, which should be when your button is clicked. Remember that the query function returns a promise, so you need to use await to get the data. Also, since we're using await, the handleSubmit function needs to be an async function. This approach is not Wasp-specific but rather comes down to how to use React hooks and best practices around that. For more information, you can refer to the React documentation on hooks (https://react.dev/learn#using-hooks) as suggested in the Discord support thread (https://discord.com/channels/686873244791210014/1218413056397279312). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•3mo ago

Well when i do that i get:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See

@kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error you're seeing is a common React error that occurs when you try to call a hook outside of a React component or inside a regular JavaScript function. Hooks are special functions that must adhere to certain Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). In your case, you're trying to call a hook (getFilteredProducts) inside a regular JavaScript function (handleSubmit). This is against the rules of hooks and hence the error. However, you can call the query function directly without using the useQuery hook. The query function returns a promise, so you can use it like any other asynchronous function. Here's how you can modify your handleSubmit function:

const handleSubmit = async () => {
  console.log('Form Values:', formValues);
  try {
    const data = await getFilteredProducts({
      minPrice: 10,
      maxPrice: 100,
      minRevenue: 500,
      maxRevenue: 5000
    });
    console.log(data);
  } catch (error) {
    console.error("Error fetching filtered products:", error);
  }
};

const handleSubmit = async () => {
  console.log('Form Values:', formValues);
  try {
    const data = await getFilteredProducts({
      minPrice: 10,
      maxPrice: 100,
      minRevenue: 500,
      maxRevenue: 5000
    });
    console.log(data);
  } catch (error) {
    console.error("Error fetching filtered products:", error);
  }
};

SvenOP•3mo ago

kapa goat

MEE6•3mo ago

Wohooo @Sven, you just became a Waspeteer level 10!

Gaming

Programming

How could i run a query funciton on button click