5

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,
  });
10
  • 1
    Ese código que muestras ahi... se ejecuta dentro de una ruta de express? o cuando se ejecuta? podrías aclarar o agregar esa parte del código?
    – Pipe
    Commented el 29 sept. 2022 a las 19:31
  • Hola @Pipe, este codigo se ejecuta en un componente de ruta de next.js a traves de useSWR. Agregue el bloque al final de mi pregunta y edité los tags
    – Agustin G.
    Commented el 29 sept. 2022 a las 19:48
  • No se mucho de next.js... pero tengo entendido que ese error sale cuando se termina una ejecucion sin haber retornado una respuesta... para este caso creo que la solución podría estar en poner un await. Cambia la linea antes del catch por await fetchNearbyPlaces();.
    – Pipe
    Commented el 29 sept. 2022 a las 19:53
  • @Pipe vos te referis a la llamada inmediatamente antes del catch? Originalmente tenia un await y asi subi la pregunta. Probando, elimine este await y veo que funciona igual, por lo que lo elimine de la pregunta tambien
    – Agustin G.
    Commented el 29 sept. 2022 a las 20:09
  • Creo que el problema debe estar entonces en el timeout, 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 un Promise... y solo llamar a resolve cuando ya tengas todos los resultados
    – Pipe
    Commented el 29 sept. 2022 a las 20:24

1 respuesta 1

2
+50

Si entiendo bien tu código, el problema es el siguiente:

  • Se recibe una request
  • Tu servidor encuentra la función a ejecutar y realiza la llamada a dicha función.
  • La llamada termina, pero como el objeto res no ha sido usado para dar una respuesta (se ha delegado la conclusión con un timeout), aparece el warning: se ha terminado de procesar en el hilo asociado a la request pero no se ha mandado todavía una respuesta (seguramente axios hace una comprobación del estado del objeto res).

No me queda muy claro por qué usas un timeout y esperas dos segundos en lugar de simplemente llamar a la función, pero ése es el motivo del aviso. Puedes ignorarlo (o desactivarlo con el flag externalResolver = true, como dice la documentación.

Actualización:

He estado mirando la documentación de Google Maps y he encontrado lo siguiente:

Hay un retraso de unos segundos entre el momento en que se emite una next_page_token y el momento en que estará disponible. Si solicitas la página siguiente antes de que esté disponible, se mostrará una respuesta INVALID_REQUEST.

Esto explica que necesites retrasar la petición, pero hay una nota final explicando cómo esperan que uses la interfaz (las negritas son mías):

Nota: El uso correcto de next_page_token consiste en solicitar la página siguiente de resultados solo cuando el usuario lo solicita. Te recomendamos que implementes la paginación real (que muestre 20 resultados a la vez) o que agregues lugares adicionales en la parte inferior de la página de resultados una vez que el usuario se desplace hasta el final.

Realmente lo que se espera es que no la tengas automatizada: la forma de evitar usar setTimeout es no ser tan ansioso a la hora de obtener la información y sólo mostrar 20 entradas. Si el usuario quiere ver más, entonces se pide las siguientes 20 entradas.

4
  • Buen dia, si yo no ejecuto el setTimeOut no obtengo mas resultados, solo los de la primer llamada. Aunque use una función asíncrona dentro del then y un await en lugar el setTimeout. Hay delay aclarado en la documentacion, pero no funciona con async-await. developers.google.com/maps/documentation/places/web-service/…
    – Agustin G.
    Commented el 3 oct. 2022 a las 11:44
  • Por otro lado, la solucion que me das es la que estoy buscando. Agregando ese objeto export config.api.externalResolver: true se solucionó el problema. Muchisimas gracias! En una hora me deja asignarte la recompensa, saludos
    – Agustin G.
    Commented el 3 oct. 2022 a las 11:46
  • He añadido cierta información sobre el uso del API, no sé si es lo que estás buscando Commented el 5 oct. 2022 a las 8:44
  • 1
    Te agradezco, eso mismo habia leido yo y por requerimientos tengo que obtener (de ser posible) 60 resultados para places, 60 para beaches, todo para finalmente terminar filtrando 10 resultados xD pero el que paga decide jaja. Gracias nuevamente por tu tiempo.
    – Agustin G.
    Commented el 5 oct. 2022 a las 14:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.