Lambda Functions. Including Query Parameters is Causing the Request to not Work (with Create React App)

Support
,
1

Hello,

I am having an issue where my requests are breaking, if I use query parameters, and I really need the query parameters, in order for the site to work properly.

I am doing a site with create react app and redux.
created with this command:
npx create-react-app my-app --template redux

The lambda function is not working when I include query parameters. I can’t tell if it is that the proxy is not working, or if it is that the proxy is working, but the string is just not matching to the exact location of the lambda function. It seems like netlify is trying to match it to a file named “api?search=test”.js … Instead of just “api.js” and then separating the query params at the end.

Can anyone tell me how to fix this?
Thank you!

  1. My lambda function looks like this:

src/functions/api.js

export async function handler(event, context, callback) {
  let queryParams = JSON.stringify(event.queryStringParameters);
        try {
            callback(null, {
            statusCode: 200,
            body: queryParams,
           });
       } catch (error) {
            callback(error);
       }
  1. In my package.json, I have:

"proxy": "http://localhost:9000",

  1. If I send this request from the front-end react, IT WORKS (I get a response with an empty object):

    axios
    .get("/.netlify/functions/api")
    .then((res) => {
            console.log("from lambda function:", res);
    })
   .catch(console.log);

  2. But if I send this request, with query params IT DOES NOT WORK. I get an error that indicates that the request is no longer being proxied to port 9000 (where the functions are being served from).

    axios
    .get("/.netlify/functions/api&search=test")
    .then((res) => {
            console.log("from lambda function:", res);
    })
   .catch(console.log);

ERRORS:

xhr.js:178 GET http://localhost:3000/.netlify/functions/api&search=test 500 (Internal Server Error)
Error: Request failed with status code 500
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)

Function invocation failed: Error: Cannot find module ‘/Users/me/Desktop/my-react-app/functions/api&playlist=all’
Require stack:

  • /usr/local/lib/node_modules/netlify-lambda/lib/serve.js
  • /usr/local/lib/node_modules/netlify-lambda/bin/cmd.js

netlify.toml

[build]
command = “CI= react-scripts build”
functions = “functions”
publish = “build”

package.json
local build command:

“dev”: “NODE_ENV=development concurrently "netlify-lambda serve src/functions" "react-scripts start"”

2

I have no idea what happened. I put the same code in a different component, and now it’s (seemingly magically) working. So, I guess I’ll just leave this here as a “how to” in case it’s helpful ??

3

Hey @maiya,
You’re not imagining things! We did roll out a change to our query param processing that was meant to improve how they work, but the change ended up causing some unexpected breakage and we rolled it back. Looks like you were testing while that was going on. Thanks for sharing the walkthrough, I agree that it’ll be helpful as a how-to :smiley: