For my Bubble app, I need to use dynamic parameters in the json query of an API which only responds to a specific configuration of form-data (the API apparently uses an ElasticSearch DB, given the look of the queries suggested in the doc).
In Postman, I was able to make the following request work:
This is where it gets tricky (in my novice opinion): I then add my json string ElasticSearch query in the “query” form-data entry (I need to filter results with this query), and the only way to get a valid API response is to also set the “Content-Type” as “application/json” in the same entry (even though the header itself is set to form-data…). If I leave the query’s Content-Type field empty, the API doesn’t use my ElasticSearch query string at all and responds with an unfiltered list of results.
Now, I need to do reproduce the working Postman config in the Bubble API Connector, and I can’t find any way to make this work.
Unfortunately, the API respond with a 500 and I suspect this is because I was unable to specific “application/json” in the Content-Type of the “query” field. But I do not see any way to achieve this in the API Connector.
I tried many different combinations, tried to use the ElasticSearch query string in a json body, body type…etc but nothing seems to work (the API either responds with an error or with unfiltered results).
The API I’m using is poorly documented (doc only shows Postman configs), and I reached out to the devs to no avail.
I don’t think you need to change the content-type. The API Doc doesn’t talk about using JSON as content-type. They use form-data or querystring. They receive the json like a string in a parameter. What I guess that may happen is that Bubble may encode the request.
Did you tried raw encoding instead? What Is the error if you use form-data?
Try to post the request to requestbin.com and debug the data received.
“Content-Type ‘application/octet-stream’ is not supported”
What hinted me to add “application/json” is a particular screenshot in the doc where they specifically highlighted the “Content-Type” field and set it to “application/json” in the request body table (the link to this screenshot appears to be broken on the doc page unfortunately, but trust me it was there ):
So I’m guessing that the Content-Type really has to be set to json in the body, since it was highlighted in the doc and that the API throws an error when configuring requests differently…
I tried various raw requests but I really don’t know how to format these. I analyzed the form-data query the F&T portal is itself using via the Chrome dev tools:
I tried to reproduce this and here are the ones I tried but I’m not even sure they were formatted correctly as per raw encoding standards… Here is what I get when trying this route:
The request goes through, but the response is not helpful: it sends unfiltered results back to me, meaning the ElasticSearch query string was not taken into account.
I get the same behavior in Bubble with this particular config.
I posted the request to a RequestBin workflow but I’m not sure what to do next to analyze the response?
Leave it to the EU to make someone do a POST request when they are GETting data, and to shove an entire minified JSON body into the URL as query string
What’s not working is that I can’t get the API to respond with filtered results when making the request from Bubble: all the configs I tried either get me an error or unfiltered results.
Via Postman, I’m able to get a proper filtered response from the API with the config I showed in my first post (query string in the form-data field, with Content-Type set to json in the same row).
I will try comparing Bubble and Postman with the tools you mentioned and report back. Thank you so much!
I have to add that I was indeed able to make the request work from Bubble, the problem is that I have to use a query.json file instead of a string request in the form-data:
With this config, the request returns proper filtered results from the API, but then I lose all ability to make the query dynamic since the parameters are inside the .json file…
Trying to bridge the gaps I was seeing between Postman and Bubble queries in the RequestBin response, I added a few headers to Bubble so now the Bubble query looks almost exactly identical to the working Postman request:
Compare the “query” portion of each, I bet Postman has the ability to add the content-type for the form field while Bubble cannot like your topic title is basically asking for
For each one:
Copy paste just the properties (the { } and everything between) of the “query” object into a unescaper like Free Online JSON Escape / Unescape Tool - FreeFormatter.com
Then put then into a prettifier like Best JSON Pretty Print Online
I don’t know what Postman is doing in the shadows that make the requests work
Yes I’ve tried to send the following raw body data but I’m not sure if the format is right (I’m kind of a noob).
As I understand it, here is the raw body data of the Postman request that works:
Analyzing the only request that works with Bubble (adding the json query as a .json file in the API request), here is what I get in both Postman (left) and Bubble (right):
You can make it work with a file, by using one of the plugin that create json or txt file and send the file using API Connector. The API Really expect the json to be in multipart form format and this is why you need to send a file.
Thanks Jici, I considered this option but couldn’t find a way to dynamically create a .json file that I could then store somewhere within Bubble.
Because as far as I know, the only way I can pass the .json to the API is with its url. For this I’m guessing that I need to store the .json somewhere I can retrieve its url from (file Bubble thing, or even file manager?) and pass it during the API request.
):
