Apollo React Why Can't Query inside UseEffect hook

Question

I am just learning about Apollo-React but I couldn't make graphql request

This is how I do without Apollo

const Search = () => {
    const [searchedText, setSearchedText] = React.useState('')
    const [suggestions, setSuggestions] = React.useState([])
    const [selected, setSelected] = React.useState(null)

    const debounceHandler = (searchedText) => debounce(() => {
        sendQuery(`{search(str:"${searchedText}") {name}}`).then(({search}) => {
            if (!search) return
            setSuggestions(search)
        })
    }, 500)

    const handleInputChange = async (e) => {
        if(e.key === 'Enter') {
            const name = e.target.value
            sendQuery(`{getPokemon(str:"${name}"){name, image}}`).then(({getPokemon}) => {
                setSelected(getPokemon)
            })
        }
        debounceHandler(searchedText)()
    }

   return (
    <div>
            <h1>Pokemon Search</h1>
            <input type="text" value={searchedText} onChange={(e) => setSearchedText(e.target.value)} onKeyUp={(e) => handleInputChange(e)} style={{width:'100%'}} />
            <hr />
            <div>
                {selected ? <PokemonProfile selected={selected} /> : suggestions.map(({name}) => (
                    <ShowSuggestion name={name} searchedText={searchedText} setSelected={setSelected}/>
                )) }
            </div>
    </div>
    )
}

Now without my own sendQuery function, I want to use Apollo's useQuery hook.

const GET_POKEMON = gql`
    query getPokemon ($str: String!) {
        getPokemon(str: $str) {
            name
            image
        }
    }
`;

const SEARCH = gql `
query search($str: String!) {
    search(str:$str) {
      name
    } 
  }
`;

These are my queries and results correctly on the playground. Now I write Search function again. I say whenever searchedText changes (WHen user types in), query Search and set the returning data as suggestions. Whenever user hits enter, I want to query the Pokemon from backend and set it as selected.

const Search = () => {
    const [searchedText, setSearchedText] = React.useState(null)
    const [suggestions, setSuggestions] = React.useState([])
    const [selected, setSelected] = React.useState(null)
    
    React.useEffect(() => {
        const { data } = useQuery(SEARCH, {
            variables: {  "str": searchedText },
            pollInterval: 500,
        });

        if (data) {
            setSuggestions(data)
          }

    }, [searchedText])


    const fetchAndSelect = name => {
        setSearchedText('')
        const { pokemon } = useQuery(GET_POKEMON, {
            variables: {
                "str": name
            }
        })

        setSelected(pokemon)
    }



    const handleInputChange = (e) => {
        const name = e.target.value
        if(e.key === 'Enter') {
            return fetchAndSelect(name)
        }
        setSearchedText(name)
    }


   return (
    <div>
        <h1>Pokemon Search</h1>
        <input type="text" value={searchedText} onKeyUp={(e) => handleInputChange(e)} style={{width:'100%'}} />
        <hr />
        <div>
            {selected ? <PokemonProfile selected={selected} /> : suggestions.map(({name}) => (
                <ShowSuggestion name={name} searchedText={searchedText} setSelected={setSelected}/>
            ))}
        </div>
    </div>
    )
}

But this gives Invalid hook call error. If I don't make the query inside useEffect ( I am not sure what is wrong with this?) this time I get Rendered more hooks than during the previous render. error. I am not sure what I am doing wrong?

EDIT

Based on answer I edit the code like following

const Search = () => {
    const [searchedText, setSearchedText] = React.useState(null)
    const [suggestions, setSuggestions] = React.useState([])
    const [selected, setSelected] = React.useState(null)
    const debouncedSearch = debounce(searchedText, 1000) // Trying to debounce the searched text
    const [searchPokemons, { data }] = useLazyQuery(SEARCH);
    const [getPokemon, { pokemon }] = useLazyQuery(GET_POKEMON)

    React.useEffect(() => {
        if (!searchedText) return

        setSelected(null)
        searchPokemons({ variables: { str: searchedText }})

        if (data) {
            console.log(data)
            setSuggestions(data)
        }

    }, [debouncedSearch])


    const fetchAndSelect = name => {
        setSearchedText('')
        getPokemon({variables: {str: name}})
        if (pokemon) {
            setSelected(pokemon)
        }
    }

    const handleInputChange = (e) => {
        const name = e.target.value
        if(e.key === 'Enter') {
            return fetchAndSelect(name)
        }
        setSearchedText(name)
    }

   return (
    <div>
        <h1>Pokemon Search</h1>
        <input type="text" value={searchedText} onKeyUp={(e) => handleInputChange(e)} style={{width:'100%'}} />
        <hr />
        <div>
            {selected ? <PokemonProfile selected={selected} /> : suggestions.map(({name}) => (
                <ShowSuggestion name={name} searchedText={searchedText} setSelected={setSelected}/>
            ))}
        </div>
    </div>
    )
}

I am unable to type anything on the input. It is fetching like crazy. Please help

Answer 1

You should use useLazyQuery Hook in this case. It is very useful for things that happen at an unknown point in time, such as in response to a user's search operation.

How about If you call use your hook on the top of your function and just call it inside the useEffect hook.

const [search, { data }] = useLazyQuery(SEARCH, {
        variables: {  "str": searchedText },
        pollInterval: 500,
    });

React.useEffect(() => {
        if (searchedText) 
            search() // Function for executing the query

        if (data) 
            setSuggestions(data)

    }, [searchedText])

As you see, useLazyQuery handles fetching data in a synchronous way without any promises.