Error when fetching API data using Netlify Functions

ayat1 · September 15, 2021, 5:30am

I have an error fetching data from an API using Netlify Functions. I have tried several times but always fail… I feel like I’m missing something so it would be great if somebody can help me. If this lacks information, please tell me!

■fetch-weather.js (/NetlifyFunctions)

exports.handler = async function(event, context) {
    try {
        const {city} = event.queryStringParameter;
        const API = process.env.REACT_APP_API_KEY;

        const url= `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API}`;

        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        return { 
            statusCode: 200,
            body: JSON.stringify({data})
        }
    } catch(err) {
        console.log(err);
        return { 
            statusCode: 400,
            body: JSON.stringify({error: 'Failed fetching data'})
        }
    }
}

■WeatherDisplay.js

const WeatherDisplay = () => {
  const [enteredCity, setEnteredCity] = useState('Tokyo');
  const weatherCtx = useContext(WeatherContext);
  const uiCtx = useContext(UIContext);

  const getCurrentWeather = async (city) => {
    const fetchWeather = async () => {
      uiCtx.setNotification({ status: 'pending', message: 'Loading...' });

      const response = await fetch(`/.netlify/functions/fetch-weather?city=${city}`, {headers: {
        'Content-type': 'application/json',
      }})

      if (!response.ok) {
        throw new Error('cannot get current weather data');
      }

      const data = await response.json();
      return data;
    };

    try {
      const data = await fetchWeather();
      weatherCtx.setLocation(data.name);
      const [array] = data.weather;
      weatherCtx.setWeather(array.main, array.description);
      uiCtx.setNotification({ status: 'success', message: 'Success' });
    } catch (error) {
      uiCtx.setNotification({ status: 'error', message: 'Cannot find result' });
    }
  };

  const inputChangeHandler = (e) => {
    setEnteredCity(e.target.value);
  };

  const submitSearchText = async (e) => {
    e.preventDefault();
    getCurrentWeather(enteredCity);
    setEnteredCity('');
  };
};

■netlify.toml

[functions]
  directory = "NetlifyFunctions"

■error

hrishikesh · September 15, 2021, 5:33am

Could you share your site name?

ayat1 · September 15, 2021, 5:51am

Thank you! https://react-weather-app222.netlify.app/

hrishikesh · September 15, 2021, 5:54am

As I can see, the function is working, however you seem to have an error in your code. This is from the function logs:

TypeError: Cannot destructure property 'city' of 'event.queryStringParameter' as it is undefined.
    at Runtime.exports.handler (/var/task/fetch-weather.js:3:16)
    at Runtime.handleOnce (/var/runtime/Runtime.js:66:25)

Checked here: Netlify App

ayat1 · September 15, 2021, 6:02am

Thank you for your quick response. Let me check if my understanding is right.

Here I fetch from a URL that includes city parameter const url= https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API};, and I can get it from const {city} = event.queryStringParameter; (const city = event.queryStringParameter.city)

Then I use this function to get the city parameter by adding ?city=${city}
const response = await fetch(/.netlify/functions/fetch-weather?city=${city}, {headers: {
‘Content-type’: ‘application/json’,
}})

When I search Paris in a search form and hit enter, the fetch URL includes paris so it looks it recognizes city… sorry I’m confused where the actual problem is.

hrishikesh · September 15, 2021, 6:04am

I think it’s event.queryStringParameters (plural) and not event.queryStringParameter.

ayat1 · September 15, 2021, 6:09am

Yes it was plural… now it says “fetch is undefined” so I guess I need to import axios etc, otherwise I can’t use it like this?

hrishikesh · September 15, 2021, 6:12am

Yes, fetch is not available in Node.js by default. You’d have to use node-fetch.

ayat1 · September 15, 2021, 6:28am

Thanks! I’m having npm issues, once I solve it I’ll post here how it went!

ayat1 · September 15, 2021, 7:48am

Now it’s responding with a 502…

■What I changed

npm install node-fetch
changed the code as below

import fetch from 'node-fetch';

const fetch = require("node-fetch");

exports.handler = async function(event, context) {
    try{
        const {city} = event.queryStringParameters;
       ........
}

■error

hrishikesh · September 15, 2021, 7:56am

Hi @ayat1,

That’s probably not how you use node-fetch.

You either need to use require or import, but not both.

ayat1 · September 15, 2021, 8:45am

Thank you for responding. All of them below returns a 502.

import fetch from ‘node-fetch’;
const fetch = require(“node-fetch”); //502
const fetch = request(‘node-fetch’).default; //502 (something I found here)
const fetch = require(‘node-fetch’).default; //502

Below is the result of no.1
5:43:57 PM: 2021-09-15T08:43:57.249Z undefined ERROR Uncaught Exception {“errorType”:“Runtime.UserCodeSyntaxError”,“errorMessage”:“SyntaxError: Cannot use import statement outside a module”,“stack”:[“Runtime.UserCodeSyntaxError: SyntaxError: Cannot use import statement outside a module”," at _loadUserApp (/var/runtime/UserFunction.js:98:13)“,” at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)“,” at Object. (/var/runtime/index.js:43:30)“,” at Module._compile (internal/modules/cjs/loader.js:999:30)“,” at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)“,” at Module.load (internal/modules/cjs/loader.js:863:32)“,” at Function.Module._load (internal/modules/cjs/loader.js:708:14)“,” at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)“,” at internal/main/run_main_module.js:17:47"]}
5:43:57 PM: 2021-09-15T08:43:57.459Z undefined ERROR Uncaught Exception {“errorType”:“Runtime.UserCodeSyntaxError”,“errorMessage”:“SyntaxError: Cannot use import statement outside a module”,“stack”:[“Runtime.UserCodeSyntaxError: SyntaxError: Cannot use import statement outside a module”," at _loadUserApp (/var/runtime/UserFunction.js:98:13)“,” at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)“,” at Object. (/var/runtime/index.js:43:30)“,” at Module._compile (internal/modules/cjs/loader.js:999:30)“,” at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)“,” at Module.load (internal/modules/cjs/loader.js:863:32)“,” at Function.Module._load (internal/modules/cjs/loader.js:708:14)“,” at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)“,” at internal/main/run_main_module.js:17:47"]}
5:43:57 PM: 82760438 Duration: 165.20 ms Memory Usage: 14 MB 5:43:57 PM: Unknown application error occurred
Runtime.UserCodeSyntaxError
5:44:12 PM: 2021-09-15T08:44:12.723Z undefined ERROR Uncaught Exception {“errorType”:“Runtime.UserCodeSyntaxError”,“errorMessage”:“SyntaxError: Cannot use import statement outside a module”,“stack”:[“Runtime.UserCodeSyntaxError: SyntaxError: Cannot use import statement outside a module”," at _loadUserApp (/var/runtime/UserFunction.js:98:13)“,” at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)“,” at Object. (/var/runtime/index.js:43:30)“,” at Module._compile (internal/modules/cjs/loader.js:999:30)“,” at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)“,” at Module.load (internal/modules/cjs/loader.js:863:32)“,” at Function.Module._load (internal/modules/cjs/loader.js:708:14)“,” at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)“,” at internal/main/run_main_module.js:17:47"]}
5:44:12 PM: dc514ce8 Duration: 179.60 ms Memory Usage: 14 MB 5:44:12 PM: Unknown application error occurred
Runtime.UserCodeSyntaxError
5:44:12 PM: 2021-09-15T08:44:12.984Z undefined ERROR Uncaught Exception {“errorType”:“Runtime.UserCodeSyntaxError”,“errorMessage”:“SyntaxError: Cannot use import statement outside a module”,“stack”:[“Runtime.UserCodeSyntaxError: SyntaxError: Cannot use import statement outside a module”," at _loadUserApp (/var/runtime/UserFunction.js:98:13)“,” at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)“,” at Object. (/var/runtime/index.js:43:30)“,” at Module._compile (internal/modules/cjs/loader.js:999:30)“,” at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)“,” at Module.load (internal/modules/cjs/loader.js:863:32)“,” at Function.Module._load (internal/modules/cjs/loader.js:708:14)“,” at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)“,” at internal/main/run_main_module.js:17:47"]}
5:44:17 PM: 2021-09-15T08:44:17.902Z undefined ERROR Uncaught Exception {“errorType”:“Runtime.UserCodeSyntaxError”,“errorMessage”:“SyntaxError: Cannot use import statement outside a module”,“stack”:[“Runtime.UserCodeSyntaxError: SyntaxError: Cannot use import statement outside a module”," at _loadUserApp (/var/runtime/UserFunction.js:98:13)“,” at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)“,” at Object. (/var/runtime/index.js:43:30)“,” at Module._compile (internal/modules/cjs/loader.js:999:30)“,” at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)“,” at Module.load (internal/modules/cjs/loader.js:863:32)“,” at Function.Module._load (internal/modules/cjs/loader.js:708:14)“,” at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)“,” at internal/main/run_main_module.js:17:47"]}
5:44:17 PM: c35379f7 Duration: 153.27 ms Memory Usage: 14 MB 5:44:17 PM: Unknown application error occurred
Runtime.UserCodeSyntaxError
5:44:18 PM: 2021-09-15T08:44:18.148Z undefined ERROR Uncaught Exception {“errorType”:“Runtime.UserCodeSyntaxError”,“errorMessage”:“SyntaxError: Cannot use import statement outside a module”,“stack”:[“Runtime.UserCodeSyntaxError: SyntaxError: Cannot use import statement outside a module”," at _loadUserApp (/var/runtime/UserFunction.js:98:13)“,” at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)“,” at Object. (/var/runtime/index.js:43:30)“,” at Module._compile (internal/modules/cjs/loader.js:999:30)“,” at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)“,” at Module.load (internal/modules/cjs/loader.js:863:32)“,” at Function.Module._load (internal/modules/cjs/loader.js:708:14)“,” at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)“,” at internal/main/run_main_module.js:17:47"]}

hrishikesh · September 15, 2021, 9:00am

Hi @ayat1,

Here’s a reference that works:

github.com

Hrishikesh-K/ThreadTalk.JS/blob/main/src/functions/addComment.js

// Require the Node Modules
const fetch = require('node-fetch')
const showdown = require('showdown')
const SMTPClient = require('emailjs').SMTPClient

// Require our own modules
const faunaDB = require('./intermediate/setupComments').faunaDB
const commentsDB = require('./intermediate/setupComments').commentsDB
const setupComments = require('./intermediate/setupComments').setupComments
const showdownConfig = require('./intermediate/setupComments').showdownConfig

// Start the function
exports.handler = async (event, context) => {

  // Store identity and user context
  const {identity, user} = context.clientContext
  
  /*
  The following is a security check. The following will return true only when a user of your website has logged in
  before calling the function. This would prevent anyone else including the same user to be able to spam the

This file has been truncated. show original

ayat1 · September 15, 2021, 9:06am

Thank you! I’ll check it out and try to work on improving my code!

Topic		Replies	Views
Netlify Fetch Function Works Locally, Returns 502 Error Deployed Support deployment , lambda-functions , netlify-newbie	2	690	November 27, 2022
Netlify Functions return Status Error 502 Support deployment , lambda-functions , environment-vars	5	665	April 12, 2023
How to fetch from Netlify function Support netlify-cli , netlify-newbie	3	2112	April 9, 2022
Fetch() works locally, but fails after deploying to netlify (Next.js 13) Support lambda-functions	2	379	January 26, 2023
Getting an error when making a call to netlify function to get my key Support deployment , netlify-forms , netlify-newbie	17	605	July 2, 2023

Error when fetching API data using Netlify Functions

Related topics