Netlify Functions in Gatsby JS

Question

I am trying to follow this tutorial https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/

I installed the dependencies, that seemed to be fine. I added the necessary scripts in my package.json this is what I have currently for scripts

"scripts": {
    "build": "gatsby build && netlify-lambda build src/lambda",
    "start": "run-p start:**",
    "start:app": "npm run develop",
    "develop": "gatsby develop",
    "build:app": "gatsby build",
    "build:lambda": "netlify-lambda build src/lambda",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\""
  },

I added in the netlify.toml at the root.

I appended my gatsby-config.js to add the developMiddleWare portion and the var proxy seen here

require('dotenv').config()
var proxy = require("http-proxy-middleware")


module.exports = {
  siteMetadata: {
    title: `Creative Portfolio`,
  },
  developMiddleware: app => {
    app.use(
      "/.netlify/functions/",
      proxy({
        target: "http://localhost:9000",
        pathRewrite: {
          "/.netlify/functions/": "",
        },
      })
    )
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-datocms`,
      options: {
        apiToken: process.env.DATO_API_TOKEN,
      },
    },
  ],
  
}

I then made the following file in src/lambda/hello.js

// For more info, check https://www.netlify.com/docs/functions/#javascript-lambda-function
export function handler(event, context, callback) {
    console.log("queryStringParameters", event.queryStringParameters)
    callback(null, {
      // return null to show no errors
      statusCode: 200, // http status code
      body: JSON.stringify({
        msg: "Hello, World! " + Math.round(Math.random() * 10),
      }),
    })
  }

Then finally on my index.js page I added a button to fetch the response.

function handleClick(e) {
    fetch("/.netlify/functions/hello")
  .then(response => response.json())
  .then(console.log)
  }

button in a component

<a href="#" onClick={handleClick}
      Click me
    </a>>

Now for the result, when I run yarn start I get the following success for the proxy in terminal.

info [HPM] Proxy created: /  -> http://localhost:9000
info [HPM] Proxy rewrite rule created: "/.netlify/functions/" ~> ""

And when I click on the button I get the following error in my console.

GET http://localhost:8000/.netlify/functions/hello 504 (Gateway Timeout)
Uncaught (in promise) SyntaxError: Unexpected token E in JSON at position 0 

Hopefully someone can help with this I'm pretty stuck.

I also get the following error in my console

[HPM] Error occurred while trying to proxy request hello from localhost:8000 to http://localhost:9000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 

Answer 1

You forgot the start:lambda script in package.json scripts

"start:lambda": "netlify-lambda serve src/lambda",

ref https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/