Mi aplicación permite a los usuarios realizar búsquedas y obtener sugerencias a medida que escriben en el cuadro de búsqueda. Cada vez que el usuario ingresa un carácter, uso 'buscar' para obtener las sugerencias de una API. La cuestión es que si el usuario realiza la búsqueda rápidamente, puede obtener el resultado antes de que se obtengan las sugerencias. En este caso, quiero cancelar la solicitud de recuperación.
Solía tener la misma aplicación en React y podía cancelar fácilmente la solicitud usando AbortController, pero eso no funciona en Next js.
Investigué un poco y creo que el problema está ocurriendo porque Next no tiene acceso a AbortController cuando intenta generar las páginas.
También tuve este problema cuando traté de usar 'window.innerWidth' porque parece que Next tampoco tiene acceso a 'window'.
La solución que encontré fue usar 'useEffect'. Funcionó perfectamente cuando lo usé con 'ventana'.
const [size, setSize] = useState(0) useEffect(() => { setSize(window.innerWidth) }, [])Pero no funciona cuando uso AbortController. Primero lo hice así:
let suggestionsController; useEffect(() => { suggestionsController = new AbortController(); },[])Pero cuando traté de usar 'suggestionsController', siempre estaría indefinido.
Entonces traté de hacer lo mismo usando 'useRef'.
const suggestionsControllerRef = useRef(null) useEffect(() => { suggestionsControllerRef.current = new AbortController(); },[])Así es como estoy buscando las sugerencias:
async function fetchSuggestions (input){ try { const response = await fetch(`url/${input}`, {signal: suggestionsControllerRef.current.signal}) const result = await response.json() setSuggestionsList(result) } catch (e) { console.log(e) } }Y así es como estoy abortando la solicitud:
function handleSearch(word) { suggestionsControllerRef.current.abort() router.push(`/dictionary/${word}`) setShowSuggestions(false) }Todo funciona perfectamente por primera vez. Pero si el usuario intenta realizar otra búsqueda, la función 'fetchSuggestions' deja de funcionar y aparece este error en la consola 'DOMException: no se pudo ejecutar 'fetch' en 'Window': el usuario canceló una solicitud'.
¿Alguien sabe cuál es la forma correcta de usar AbortController en Next js?
La solución que encontré al problema fue crear una nueva instancia de AbortController cada vez que el usuario realiza la búsqueda. Mientras se mostraban las sugerencias, 'showSuggestions' era verdadero, pero cuando se invocaba 'handleSearch', 'showSuggestions' se configuraba como falso. Así que lo agregué como una dependencia para useEffect.
useEffect(() => { const obj = new AbortController(); setSuggestionController(obj) },[showSuggestions])También cambié de useRef a useState, pero no estoy seguro de si eso era necesario porque no probé esta solución con useRef.
No sé si esa es la mejor manera de usar AbortController en Next js, pero mi aplicación funciona como se esperaba ahora.