EDIT: La pregunta inicialmente era evitar un error en consola, el mismo ya fue evitado mediante la configuracion de Next.JS gracias al comentario de Pablo. Ahora busco otra respuesta, que sea como hacer que mi codigo funcione, sin usar setTimeout, es por ello que cambio el titulo de la misma.
Estoy obteniendo lugares cercanos a un punto con la API de Google maps.
En un momento me esta saliendo un error (indicado acá abajo) pero el código continua su ejecución y finalmente me devuelve el resultado esperado. (asi es, todo me funciona bien, solo que me aparece ese error en la consola de node, y quisiera saber que estoy haciendo mal para que aparezca, para evitarlo.)
API resolved without sending a response for /api/google/places/33.807501/-78.70039, this may result in stalled requests.
El código empieza por la ultima línea del try
cuando hago fetchNearbyPlaces();
, entonces se ejecuta dicha funcion, la cual es recursiva.
fetchNearbyPlaces
inicialmente no recibe ningun parametro, entonces hago la llamada normal. Si el resultado de esta llamada trae un next_page_token
, indica que puedo traer más resultados.
Entonces, en este caso, vuelvo a llamar a fetchNearbyPlaces
pero esta vez pasandole un parametro...
(EN ESTE MOMENTO ES CUANDO ME SALE EL ERROR)
... hasta que en un momento el resultado ya no devuelve un next_page_token
, en ese momento entra al else
, limpio los resultados, llamo a fetchNearbyBeaches
para encontrar playas cercanas, y finalmente desde esta función retorno todo el resultado.
Agregué VARIOS console.log
para ver si puedo identificar en que momento aparece el error, (dejo los console en el codigo) y lo que veo por consola es lo siguiente:
- llamamos a fetchnearbyplaces
- fetchNearbyPlaces indica que hay mas resultados, vuelvo a llamar
- ERROR: API resolved without sending a response for /api/google/places/33.807501/-78.70039, this may result in stalled requests.
- llamamos a fetchnearbyplaces
- fetchNearbyPlaces indica que hay mas resultados, vuelvo a llamar
- llamamos a fetchnearbyplaces
- Ya no hay mas resultados, limpio el resultado y llamo a fetchNearbyBeaches
- Desde fetchNearbyBeaches. Misma logica que para fecthNearbyPlaces
- Desde fetchNearbyBeaches. Misma logica que para fecthNearbyPlaces
- Finalmente devuelvo el resultado de la llamada
Este es mi código:
const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude}%2C${longitude}&radius=${radius}&key=${process.env.CW_GOOGLE_MAPS_API_KEY}`;
const beachesUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude}%2C${longitude}&radius=${radius}&type=natural_feature&key=${process.env.CW_GOOGLE_MAPS_API_KEY}`;
try {
let results = [];
let beaches = [];
const fetchNearbyBeaches = async (urlWithToken = null) => {
console.log("Desde fetchNearbyBeaches. Misma logica que para fecthNearbyPlaces");
await axios.get(urlWithToken ? urlWithToken : beachesUrl).then(data => {
beaches = [...beaches, ...data.data.results];
if (data?.data?.next_page_token) {
const newUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=${process.env.CW_GOOGLE_MAPS_API_KEY}&pagetoken=${data.data.next_page_token}`;
setTimeout(() => {
fetchNearbyBeaches(newUrl);
}, 2000);
} else {
console.log("Finalmente devuelvo el resultado de la llamada");
beaches.length > 5 && beaches.splice(5);
results.length > 5 && results.splice(5);
const finalResults = [...beaches, ...results];
finalResults.length > 10 && finalResults.splice(10);
return res.status(200).json({
data: {
results: finalResults,
},
success: true,
});
}
});
};
const fetchNearbyPlaces = async (urlWithToken = null) => {
console.log("llamamos a fetchnearbyplaces");
await axios.get(urlWithToken ? urlWithToken : url).then(data => {
results = [...results, ...data.data.results];
if (data?.data?.next_page_token) {
const newUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=${process.env.CW_GOOGLE_MAPS_API_KEY}&pagetoken=${data.data.next_page_token}`;
console.log("fetchNearbyPlaces indica que hay mas resultados, vuelvo a llamar");
setTimeout(() => {
fetchNearbyPlaces(newUrl);
}, 2000);
} else {
console.log("Ya no hay mas resultados, limpio el resultado y llamo a fetchNearbyBeaches");
const dirtyResultsWithDuplicates = [];
results.map(result => {
return types.map(type => {
if (checkFunc(result.types, type) && !result.types.includes("lodging")) {
dirtyResultsWithDuplicates.push(result);
}
});
});
const set = new Set(dirtyResultsWithDuplicates);
const filtered = Array.from(set);
results = filtered.length > 10 ? filtered.splice(10) : filtered;
fetchNearbyBeaches();
}
});
};
fetchNearbyPlaces();
} catch (err) {
res.status(500).json({
message: err.message,
statusCode: 500,
});
}
EDIT:
Esta funcion para hacer fetch a la api de google se ejecuta desde un componente, a traves de useSWR
const nearbyPlacesURL = resortDetails?.geoCoordinates?.lat && resortDetails?.geoCoordinates?.lon ? `/api/google/places/${resortDetails?.geoCoordinates?.lat}/${resortDetails?.geoCoordinates?.lon}/` : null;
if (nearbyPlacesURL) {
dataFetcher = url => fetch(url).then(res => res.json()).then(data => data?.data?.results);
}
const {
data: nearbyPlaces,
} = useSWR(nearbyPlacesURL, dataFetcher, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false,
});
next.js
a traves deuseSWR
. Agregue el bloque al final de mi pregunta y edité los tagsawait
. Cambia la linea antes del catch porawait fetchNearbyPlaces();
.await
y asi subi la pregunta. Probando, elimine este await y veo que funciona igual, por lo que lo elimine de la pregunta tambientimeout
, porque esto hace que la ejecución continue y por eso sale antes de obtener todos los datos. Yo creo que la solución estaría en plantar toda esa funcion como unPromise
... y solo llamar a resolve cuando ya tengas todos los resultados