Help with creating a function to call PlanetScale

Support
1

Hi, I am new to Netlify and serverless functions. My purpose for trying to use the PlanetScale integration is to submit data entered from a form into the database.

I was following along with the document linked here

Everything has been successfully configured up until the section “Create a function to call PlanetScale”.

I installed the dependencies as asked under my project’s root directory. I was confused about where to implement the withPlanetScale function so I referred to the document here about creating functions.

Before I go any further, I want to say I have no prior experience with TypeScript, however, I referred to the TypeScript section of the link since the example given on the PlanetScale Integration link was TypeScript.

I set up the tsconfig file as requested as well as enabling the properties specified. I placed this file directly in the functions folder under project-root/node_modules/netlify/functions.

Next, I created the function file as specified under the same directory using the example given in the PlanetScale doc.

Now, I am confused about how I should call this function. I know in the functions doc it says it can be called using /.netlify/functions/hello endpoint (Of course replacing hello with the name of my function file). Although, I am unsure of what I should use to call this.

I would appreciate any help with this or even pointing me in the right direction if there are things I should learn before going forward with this. Thank you!

2

@laqhamil If the intention is to make a request from your front end code to your function, you would likely just use Fetch.

1 Like
3

Hi Nathan, thanks so much for your response. That was exactly what I needed.

4

For anyone who may come across this thread in the future, this is how I implemented the solution.

const handleSubmit = (event) => {
    event.preventDefault();
  
    const myForm = event.target;
    const formData = new FormData(myForm);

    const plainFormData = Object.fromEntries(formData.entries());
    const formDataJsonString = JSON.stringify(plainFormData);
    


    //For Netlify form handling
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString(),
    })
    .then(function(data) { 

    .catch(function(error) { 
        
    });


    //For calling the function with PlanetScale configurations
    fetch("/.netlify/functions/DBConfig", {
        method: "POST",
        headers: { 	
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
        body: formDataJsonString,
    })

};
  
document.querySelector("form").addEventListener("submit", handleSubmit);