React Search Bar - runs twice after each search

Solution 1:

const { loading, error, data } = useMemo(() => {
   if(!query) return {loading: false, error: false, data: [] }


   return useQuery(search_reviews, {variables: {my_query: query}})

}, [query]);

does this work?

when your component renders query is empty string you fetch all data, after you hit submit query gets update(state gets updated) so a re-render happens and now query isnt empty so you get filtered data

essentially what you need is to call useQuery only when query actually changes, you could useEffect(but that requires some amount of change in your current code)