reactjs - react-select & apollo client not loading options

Question

I am trying to load options from graphql api. The output is good, we receive data and we parse it to new object containing { value, label } but i am unable to stop the loading and show options in the dropdown of react-select.

here is my code

import React from 'react'
import { useLazyQuery } from '@apollo/client'
import { GET_ECONT_CITIES_SEARCH_QUERY } from '../../graphql/queries'
import AsyncSelect from 'react-select/async'

const CityAutocompleteSelect = (props) => {
    const [findCities, { loading, error, data }] = useLazyQuery(GET_ECONT_CITIES_SEARCH_QUERY)

    const loadOptions = (inputValue) => {
        if(inputValue.trim().length > 2) {
            findCities({ variables: { limit: 5, filter: { countryCode: 'BGR', searchFilter: inputValue } } })

            if(data && data.econtCitiesSearch) {
                console.log(data.econtCitiesSearch.map(city => ({ value: city.id, label: `${city.name}, ${city.country.name} ${city.postCode}` })))
                const options = data.econtCitiesSearch.map(city => ({ value: city.id, label: `${city.name}, ${city.country.name} ${city.postCode}` }))
    
                return options
            }
    
            return []
        } 
    }

    return(
        <AsyncSelect
            isLoading={loading}
            placeholder={error ? 'моля, опитайте по-късно' : 'прим. София'}
            defaultOptions={[]}
            loadOptions={loadOptions}
            noOptionsMessage={() => 'няма намерени резултати'}
        />
    )
}

export default CityAutocompleteSelect

question from:https://stackoverflow.com/questions/65904420/react-select-apollo-client-not-loading-options

Answer 1

Waitting for answers