Create a svelte component with a function recive a data by post

Question

I need to expose a .svelte component that receives data through the post method, so that an external service can consume it and that the received data can be displayed as received

// test.svelte

<script>

let name="";
let age="";
let gender ="";

export async function post({request}){
       const body = await request.json();
       console.log(body);
       name = body.name;
       age = body.age;
       gender = body.gender;
       return {
             body:JSON.stringify({body})
       } 
    });

</script>
<form>
    <div>
       <p>{name} {age} {gender}</p>
    </div>
</form>

Check this picture maybe understand better

Hello, I need to receive a json or data that arrives through a post method and that is inside a .svelte component — SDC Office Olimpia
– SDC Office Olimpia, Commented Feb 23, 2022 at 13:59
@SDCOfficeOlimpia Please re-elaborate your question to provide more details. See how to ask. — johannchopin
– johannchopin, Commented Feb 23, 2022 at 15:22
I need to expose a .svelte component that receives data through the post method, so that an external service can consume it and that the received data can be displayed as received... please check this image -> ibb.co/6rJ7qmM — SDC Office Olimpia
– SDC Office Olimpia, Commented Feb 23, 2022 at 15:48

Bob Fanger · Accepted Answer · 2022-02-25 21:22:49Z

2

*.svelte files don't handle POST request directly.

The code you've written doesn't work inside the <script> tag of a Svelte component. Post data is not available in the frontend.

However if you're using a up-to-date SvelteKit and are hosting a non-static version.
(By using the @sveltejs/adapter-node for example)

You can use the Shadow Endpoint feature:

<!-- src/routes/test.svelte -->
<script>
export let name;
</script>

<h1>{name}</h1>

// src/routes/test.js
export async function post({ request }) {
  const data = await request.json();
  return {
    body: {
      name: data.name
    } 
  }
};

When you create an endpoint with the same filename, the post request is handled by the endpoint (backend) and if the request contains an Accept: text/html or Accept: */* header the server will respond with the SSR page using the values from the body as props.

edited Feb 25, 2022 at 21:22

answered Feb 25, 2022 at 21:13

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create a svelte component with a function recive a data by post

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related