0

I call an apollo lazy query hook for a search bar that I made and when I clear the data in the search bar I want to clear the data variable from the hook. I cant anything online to see if this is possible or not

const [
    getAutoComplete,
    { data: autoCompleteItems, loading: loadingAutoComplete },
  ] = useLazyQuery(SEARCH, {
    variables: { limit: 10 },
  });

And I call the getAutoComplete here:

useEffect(() => {
    if (searchQuery.length > 1 && searchQuery !== '') {
      getAutoComplete({ variables: { criteria: searchQuery } });
    }

    if (searchFocus && searchQuery === '') 
      // In here I want to do something like set autoCompleteItems = undefined
      getAutoComplete({ variables: { criteria: '{}' } });
    }
  }, [searchQuery]);

Basically when I clear the searchQuery, the autoCompleteItems variable is still using the previous. But when it is empty I want it to be undefined preferably not even call the api.

danhuong
  • 202
  • 1
  • 8
ousmane784
  • 306
  • 1
  • 17

1 Answers1

0

when do you clear searchQuery, graphql cache your data so if you dont need that, use no-cache like this:

    getAutoComplete,
    { data: autoCompleteItems, loading: loadingAutoComplete },
  ] = useLazyQuery(SEARCH, {
    variables: { limit: 10 },
    fetchPolicy: 'no-cache',
  });
danhuong
  • 202
  • 1
  • 8
  • 1
    This didnt seem to work. I think because autoCompleteItems variable still stores the value – ousmane784 Feb 03 '21 at 05:29
  • @ousmane784 this problem maybe the same with you:https://stackoverflow.com/questions/44079618/apollo-graphql-react-how-to-clear-query-cache-for-all-variable-combinations – danhuong Feb 03 '21 at 05:32