Single-flight mutations

Now when we upload files, we should see the screen update. That’s because when you submit a form, the default behaviour is to reload all the data on the page. You can see that in the network tab — we make a request to uploadFiles, then to both getFiles and requireUser.

We can be more efficient, by turning this into a single-flight mutation, meaning that everything happens in one request. All we need to do is be explicit about what changes when we submit the form:

export const uploadFiles = form(
	v.object({
		files: v.pipe(v.array(v.file()), v.minLength(1))
	}),
	async (data) => {
		for (const file of data.files) {
			await uploadFile({ file, parent: '<root>' });
		}

+		getFiles('<root>').refresh();
	}
);