Unable to access request.body from the endpoint.js in sveltekit skeleton project

Question

After initiating a skeleton project from sveltekit app. my index has a form :

<script>
    let name
    let password

    async function submitit(){
       // console.log("name is :", name)
       // console.log("password is :", password)
       
     const doit = async () =>{
        let res = await fetch( 'formdata' ,{
        method : "post",
        headers: {        
        'Accept': 'application/json',
        'content-type' : 'text/html; charset=UTF-8',
        //'Content-Type': 'multipart/form-data'
        },
        body : JSON.stringify({
            name : "name",
            password : "password"
        })        
    })// fetch
    let results =await res.json()
    console.log( "xxxxxxxxxxxxxxxxxxxxx"    , results )
    return results
    }       

     doit().then(data =>{
         console.log("data log : " , data)
     })


    } //submitit


</script>









<form on:submit|preventDefault={submitit}>
    <p>
    <label>Name :
        <input type="text"  placeholder="name"   aria-label="name" required bind:value={name}>
    </label>
</p>
<p>
    <label>Password :
        <input type="password" placeholder="password"   aria-label="password" required  bind:value={password}>
    </label>
</p>
    <button type="submit">Submit</button>
</form>

my endpoint formdata.js

export async function post(request) {    

    console.log("formdata js log of request : ", request)
    
    return {
        
        status : 200,
        headers: {        
            'content-type': 'application/json'
        },
        body : {            
            message : "login form submitted the login credentials",
        }
    }

} 

When I click submit, the index.svelte returns the message "login form submitted the login credentials" and it is in the console.log of the browser. The cmd which is used to run the application using npm run dev, logs the dataform.js request and prints the following :

formdata js log of request :  {
  request: Request {
    size: 0,
    follow: 20,
    compress: true,
    counter: 0,
    agent: undefined,
    highWaterMark: 16384,
    insecureHTTPParser: false,
    [Symbol(Body internals)]: {
      body: <Buffer 7b 22 6e 61 6d 65 22 3a 22 6e 61 6d 65 22 2c 22 70 61 73 73 77 6f 72 64 22 3a 22 70 61 73 73 77 6f 72 64 22 7d>,
      stream: [Readable],
      boundary: null,
      disturbed: false,
      error: null
    },
    [Symbol(Request internals)]: {
      method: 'POST',
      redirect: 'follow',
      headers: [Object],
      parsedURL: [URL],
      signal: null,
      referrer: undefined,
      referrerPolicy: ''
    }
  },
  url: URL {
    href: 'http://127.0.0.1:3000/formdata',
    origin: 'http://127.0.0.1:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: '127.0.0.1:3000',
    hostname: '127.0.0.1',
    port: '3000',
    pathname: '/formdata',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  params: {},
  locals: {},
  platform: undefined
}

Notice the following: 1- there is no username or password fields in my form or the body json.stringify in the index.svelte but it is in the request log under the url section (both are empty despite the dummy text I entered in index.svelte)

2- body stream is readable. I indicated the application to accept/send json.

I also find this pr from Rich and have no idea if what I'm facing is because of this change. Here is the PR

I'm lost with this sveltekit. I had great experience with Sapper and I hope I could figure out sveltekit so I can go on and start developing my application but this is the first step in any application, process form data.

=================================================================

****************** update : Explain needed if possible ***************************** I still would like to understand how you got the event argument from this pr because in Rich's post, the code with + is the updated one. It doesn't mention event:

Updating endpoints Similarly, handlers receive a RequestEvent. Most GET handlers will be unchanged, but any handler that needs to read the request body will need to update:

-export async function post({ params, body }) {
+export async function post({ params, request }) {
+ const body = await request.formData(); // or request.json(), etc
  await do_something_with(params, body);
  return { status: 201 };
}

there is no mention in event anywhere. How did you get the keyword "event" as an argument for the function?

Answer 1

Your endpoint should now look like this:

export async function post(event) {
  const body = await event.request.json();
  console.log('request body: ', body );
  // ... the rest is the same as before
}

Before the change linked in the PR you referenced, the argument to post was called request and you could access request.body. Now, the argument is called event and you can access event.request, which is a standard web request object. See the SvelteKit docs.

Your endpoint could also be written like this to automatically destructure the request property (note the additional curly brackets around request):

export async function post({ request }) {
  const body = await request.json();
  console.log('request body: ', body );
  // ... the rest is the same as before
}

Answer 2

You're right that the PR changed how you access the body. Now to access the request body in your endpoint you have to use:

const body = await request.json()

If you directly used your form to send the data (with action="/path/to/endpoint") you would use:

const body = await request.formData()

Edit: Note that the Response interface (request in SvelteKit) is a standard part of the Fetch API.

Docs on the request object (all methods)

See SvelteKit docs for +server.ts