JS Sapper : posting data to server (the right way ?)

Question

How to properly post data to server using Sapper JS lib ?

Saying : I have a page 'board-editor' where I can select/unselect tiles from an hexagonal grid written in SVG, and adds/substract hex coordinates in an store array.

Then user fills a form, with board: name, author, and version... Clicking on save button would POST the form data plus the array in store. The server's job, is to store the board definition in a 'static/boards/repository/[name].json' file.

Today, there's few details on the net to use correctly Sapper/Svelte with POSTing data concerns.

How to proceed ? Thanks for replies !

EDIT:

to avoid reposting of the whole page, which implies to loss of the app state, I consider using a IFRAME with a form inside.... but how to init a copy of sapper inside the IFRAME to ensure I can use the this.fetch() method in it ?

Answer 1

I use Sapper + Svelte for a website, it's really amazing! In my contact form component, data are sent to the server. This is how it's done without iframe. The data sent and received is in JSON format.

On the client side (component):

var data = { ...my contact JSON data... }
var url = '/process/contact' // associated script = /src/routes/process/contact.js

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(r => {
  r.json()
    .then(function(result) {
      // The data is posted: do something with the result...
    })
})
.catch(err => {
  // POST error: do something...
  console.log('POST error', err.message)
})

On the server side:

script = /src/routes/process/contact.js

export async function post(req, res, next) {
  /* Initializes */
  res.setHeader('Content-Type', 'application/json')
  /* Retrieves the data */
  var data = req.body
  // Do something with the data...
  /* Returns the result */
  return res.end(JSON.stringify({ success: true }))
}

Hope it helps!