Calling an API with Variable Path (Possibly Not Documented Solution)

Tips
1

Interesting thing I discovered, which I do not think is properly documented: It is possible to configure an API call that has a variable path by using a “keyless” parameter.

It’s probably not obvious what I’m talking about. Consider the following Twilio API call: The Twiilio “Lookup” API is a simple API with one GET method that returns information about a given phone number. It has the following general form:

https://lookups.twilio.com/v1/PhoneNumbers/{phone_number_to_lookup}

On the face of it, this API call seems impossible to set up in Bubble. {phone_number_to_lookup} is not an argument… It’s just part of the path to the call.

But it turns out that if you define what I can only term a “keyless” parameter, Bubble handles this just fine. Here’s the example showing how to configure:

image
image1513×918 54.5 KB

You’ll see that, instead of having a parameter name in square brackets (like [some_parameter] ), I’ve just used a space to create a keyless parameter ( [ ] ). When you do this, you still get a Key/Value pair in the “URL parameters” section of the configure call dialog, but Bubble takes the Value and appends it to the path, rather than trying to set a key with no name (which would make no sense).

So this configuration GETS the response from URL:

https://lookups.twilio.com/v1/PhoneNumbers/8005551212

And, in edit mode, if that keyless parameter is not set to private, we can change it (and this value can be dynamic of course):

image
image1416×574 37.3 KB

So, in an API Connector URL represents a path, rather than an argument with key/value pair. (Even if this is documented, it’s the sort of thing that one would easily overlook!) Note that it is important for the character sequence to be left_bracket space right_bracket. A pair of brackets without the space is not interpreted as path.

Neat.

8 Likes
2

That’s interesting, Keith.

To me, what you have looks like a key of " " (space character). What advantage do you see this having over a named key?

3

Yeah that’s what it is, but Bubble doesn’t render the call the empty thing as

& = value

It renders as the path. (And It’s not a bug or hack as you can see from shot 2: Bubble shows this is the path.)

4

Bubble calls the &param=value query parameters, they should come up as a separate list to the path parameters, using the button lower down.

I’ve found a named path parameter shows with a key but doesn’t make a query parameter.

1 Like
6

But this is at the end of the path.

It wasn’t obvious TO ME how the heck you’d make that last value in my Twilio example above dynamic. The interface makes it look like this is not possible because it labels everything as a key/value pair (implying that Bubble is going to insert this as “?key_name=value” or “&key_name=value).

7

In your case the brackets are not setting a querystring, they are setting part of the path. So, you could do https://lookups.twilio.com/v1/PhoneNumbers/[phone number to lookup] or https://lookups.twilio.com/v1/PhoneNumbers/[phone number] or any other “key” name.

Whatever is in the brackets just becomes the Name which will use the Value as part of the path.

Otherwise, if you wanted to dynamically set the querystring (i.e. after the ?), then you would put that in the URL.

https://lookups.twilio.com/v1/PhoneNumbers?phoneNumber=[phone number to lookup]

Here’s another example for the same topic. Accessing API without key/value pair

8

Ah, is it the preceding slash then that Bubble keys off of to understand path vs arg? (I guess that must be so.)

Anyway, I can see why some folks get really confuzzled by the API Connector. The interface in this case is rather obtuse.

(As you know, I’m very familiar with the POST side of the API Connector but have been futzing around with a lot more GET calls of late and am discovering all sorts of interesting gymnastics one can do there.)

1 Like
10

Yeah, but user specifies a parm that indicates a path appendage and bubble shows you a key value pair. That’s not correct. That’s all I’m saying.

You wouldn’t have that interface in your own app, you’d show something that makes sense for what’s going to happen.

My original post remains a hot tip. Lolz.