Properties with arrays are not provided correctly when posting to an external blog

[paulrobertlloyd]

When posting to an external blog, the selected categories are sent to the Micropub server using an unrecognised key name, category[] instead of category.

This is the data sent to a server by the Micro.blog app:

{
  h: 'entry',
  content: 'Test categories',
  'category[]': [ 'indiekit', 'indieweb' ],
  'mp-destination': 'https://indiekit-sandbox.netlify.app'/,
}

However, sending the same data from another app (such as Quill) will send the following data:

{
  h: 'entry',
  content: 'Test categories',
  category: [ 'indiekit', 'indieweb' ],
}

It looks like the app appends categories to a category[] field:

microblog-react/src/api/MicroPubApi.js

Line 170 in 5006bdc

params.append('category[]', category)

Using URLSearchParams.append() method multiple times adds the key value pair to a URL multiple times:

let url = new URL("https://website.example");
url.searchParams.append("category", "foo")
url.searchParams.append("category", "bar")
console.log("url", url)

// https://website.example/?category=foo&category=bar

Multiple params with the same key name get serialised as an Array, so there’s no need to indicate the field is an array by adding a [] suffix. That’s my understanding, anyway.

[manton]

Thanks, you're right, it should only be using the [] for form-encoded params, not for JSON.

[manton]

I haven't looked at this closely yet, but I think the issue is that the Axios framework we're using sends as JSON when we really just want plain ol' form-encoded parameters here. Micropub servers can implement both but I think there's likely better compatibility not using JSON.

[paulrobertlloyd]

Looks like there are some solutions to sending as form encoded params here.

Separately, if/when I’m able to test changes, I was thinking it might be nice to remove the Axios dependency and use the Fetch API instead, which is now supported by Node.

[manton]

I'll defer to @vincentritter on that but I'd be fine with it. We use fetch for the XML-RPC calls and Micropub discovery already.

[vincentritter]

Thanks @paulrobertlloyd and also thank you @manton.

I'm working through this at the moment. For your benefit, when I created Gluon, I had problems sending through an array of category items, as it would do the wrong thing, this is probably because of the way it's sent using FormData. Sending an array of category for example: category = [ "Category 1", "Category 2" ] will result in the following on Micro.blog:

I need to run through more here and dig in a little, perhaps this also requires a server side change so it works as expected on Micro.blog – but the first call of action should be how the data is being sent in the first place.

You'll notice that we also do the same for other parameters like multiple photos or syndicate-to targets.

In regards of using the fetch API... yep, it's on the list and that was my plan to eventually move away from axios. Feel free to open a PR if you want to have a go 😀

Will write an update here when I have it.