Best pattern for "click here to submit your results to an API backend"

Community Help
1

I want to build a notebook which lets the user mess around with some data - load JSON from a URL, view it in a table, select some items, maybe use their own custom JavaScript to map/filter it in some ways… and then click a button to save that data to a backend API via a fetch() call.

Crucially, I don’t want to automatically POST to that backend every time the user changes anything else in the notebook: I want a “Save” button that is a very deliberate action, which the user clicks only when they are ready to submit their final modified data.

Most API examples in Observable are reactive, because they are usually fetching data from an API where sending multiple requests isn’t a problem.

In my case the POST I make to my backend is a mutation operation, so I want the user to be in full control of when it happens.

It looks like Button Input / Observable Inputs / Observable / Observable is the right tool to use here, but its documentation doesn’t show a pattern that feels quite right for what I’m trying to achieve.

Anyone got a good example notebook that does something like this?

Basically I want a good, robust pattern for “When the user clicks this button, run this fetch() POST request”.

2

This pattern looked like it might be a good fit, but it’s from a couple of years ago so I was wondering if there are any more recent patterns that have established themselves: Fetch Data on Click / Harry Biddle / Observable

3

Hi Simon, the button documentation says that the reduce function is called whenever the button is clicked. I think it would work for your POST request to happen in that handler. It’s a bit confusing because that function also returns a “value” for the button, which isn’t needed here.

1 Like
4

Thanks - that really makes sense to me now that I’ve thought about it a bit more.

I think I was put off by the function being called a “reduce” function, since what I want to do didn’t fit that mental model for me - but actually that’s clearly how I should handle this problem.

3 Likes
5

@simonw I’ve written a small helper:

1 Like