# Web API query parameter - pass variable data?

**URL:** https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598
**Category:** Questions about Thunkable X
**Created:** [January 29, 2019, 3:21am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598 "2019-01-29T03:21:18Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![ctm](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ctm/32/18113_2.png) [@ctm](https://community.thunkable.com/u/ctm)
#### Post date: [January 29, 2019, 3:21am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/1 "2019-01-29T03:21:18Z")

</div>

Is it possible to pass variable data to set the value of a QueryParameter? I’d like to be able to pass an API key that’s entered by the app user.

---

<div class="post-metadata">

### Author: ![Cian\_O\_Sullivan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cian_o_sullivan/32/34494_2.png) [@Cian\_O\_Sullivan](https://community.thunkable.com/u/Cian_O_Sullivan)
#### Post date: [January 29, 2019, 3:23am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/2 "2019-01-29T03:23:15Z")

</div>

Yes… variables are your key. The join option in text is great to add variables together with predetermined elements to create a string for the Web component

---

<div class="post-metadata">

### Author: ![ctm](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ctm/32/18113_2.png) [@ctm](https://community.thunkable.com/u/ctm)
#### Post date: [January 29, 2019, 3:27am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/3 "2019-01-29T03:27:01Z")

</div>

So, I set them via the “Web API” “set body to” function block and then set the parameter and value?

---

<div class="post-metadata">

### Author: ![ctm](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ctm/32/18113_2.png) [@ctm](https://community.thunkable.com/u/ctm)
#### Post date: [January 29, 2019, 3:45am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/4 "2019-01-29T03:45:33Z")

</div>

the parameter is “access\_token”, so do I merely set the web\_api body to “access\_token=xxxxx”? I tried that and it didn’t work

---

<div class="post-metadata">

### Author: ![lflfm](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@lflfm](https://community.thunkable.com/u/lflfm)
#### Post date: [January 29, 2019, 8:02am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/5 "2019-01-29T08:02:08Z")

</div>

~~In my experience, the WebAPI component is broken and is not sending headers or body (I’m setting up a test server to add to the bug that I opened), but query parameters are sent fine.~~ _(EDIT: yes it is working; we need to set the Content-Type header manually, otherwise node.js express will not interpret the headers and body correctly)_  
Query parameters are _not_ in the body however, so even if that was working, your attempt would not. Query parameters are (not exactly, but for the sake of simpleness) just part of the URL. So you can set the URL to [https://thetargetserver.com/?access\_token=xxxxx&someotherparam=something%20else](https://thetargetserver.com/?access_token=xxxxx&someotherparam=something%20else)  
You can do this by concatenating the strings, simple example below (should) work (I’ve not tested, developed it quickly just now to show ya so there may be bugs (other than the fact that it’s unsafe due to direct user string concatenation):

 ![20190129_085427_01_screenshot](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/8/3892be5f1cc3f73bf8ee09982377cf1c21c25c7e.png)

---

<div class="post-metadata">

### Author: ![ctm](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ctm/32/18113_2.png) [@ctm](https://community.thunkable.com/u/ctm)
#### Post date: [January 29, 2019, 1:11pm UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/6 "2019-01-29T13:11:12Z")

</div>

Point of clarification – query parameters are part of the URL in GET calls, but it’s my understanding that query parameters are in the body for POST calls. Am I wrong? Also, I do set the Content-Type header. However, I noticed I had incorrectly added the value and I’m hoping “application/w-www-form-urlencoded” is correct.

---

<div class="post-metadata">

### Author: ![lflfm](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@lflfm](https://community.thunkable.com/u/lflfm)
#### Post date: [January 29, 2019, 2:32pm UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/7 "2019-01-29T14:32:38Z")

</div>

We’re being caught up in terminology here; I’m no expert but as far as I know, we call query parameters the stuff that goes after the ? in the URI - this is because the URI is the query and the stuff that comes after the ? are the parameters. The stuff that we usually POST is the body which, as far as I know, we just call the body since it’s contents are not “standard” - they might be some sort of parameters or they might just be binary data or anything else - so we GET with parameters and POST with body (although that’s really just the “correct” implementation, both methods will actually have all the information available on the server side).  
In any case; you are probably right in that what you want to send should go in the body (since you’re talking about the POST method). Since you need to send it url encoded, I THINK THunkable does that automagically.  
So you should try:

1. in the Web API component’s definition, add a header called “Content-Type” with the value that you mentioned is expected “application/x-www-form-urlencoded” (double-check spelling and everything)
2. in blocks, set the WebAPI’s body to the text that you want
3. Call the POST method.

If it doesn’t work, there are services online that may help by replying back exactly what you posted (eg. point your WebAPI component to one of those test services and then print their response to a textbox). Example project: [https://x.thunkable.com/copy/e1e499726756be82d83979fe0831fbbc](https://x.thunkable.com/copy/e1e499726756be82d83979fe0831fbbc)  
(you’ll notice that this project is pointing to [httpbin.org](http://httpbin.org) which will reply back the request that we send…)

_edit: corrected the content type as mentioned (I’m really just copy/pasting yours here, I only really use json with my WebAPIs 🙂)_

---

<div class="post-metadata">

### Author: ![ctm](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ctm/32/18113_2.png) [@ctm](https://community.thunkable.com/u/ctm)
#### Post date: [January 29, 2019, 2:46pm UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/8 "2019-01-29T14:46:07Z")

</div>

Yes, I’ll test, again, this evening. It might have failed due to a mis-typed Content-type. However, I’m testing with a simple garage door app and don’t want to crush my wife or her car!

Being able to POST to a API is extremely important for my production apps and I don’t want to hard code the access token for security reasons.

I appreciate your advice and I’ll reply with the results of further testing.

NOTE – I believe the content type is “application/x-www-form-urlencoded”, not what you suggested above.

---

<div class="post-metadata">

### Author: ![lflfm](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@lflfm](https://community.thunkable.com/u/lflfm)
#### Post date: [January 29, 2019, 4:46pm UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/9 "2019-01-29T16:46:50Z")

</div>

heheh yeah, OK sounds like you need a solid solution 🙂  
The only WebAPI parameters that need to be hardcoded in Thunkable (as far as I see) are the headers (I opened a feature request for setting headers with blocks today); if your server accepts the access token as a query parameter or in the body of the request, then you should be able to do it without much problems.  
Fiddle around with the example project that I sent; I think it should clarify things (it really helped me debug the problem that I was having with the blank body)

---

<div class="post-metadata">

### Author: ![ctm](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ctm/32/18113_2.png) [@ctm](https://community.thunkable.com/u/ctm)
#### Post date: [January 30, 2019, 2:25am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/10 "2019-01-30T02:25:40Z")

</div>

OK. It works just fine, thankfully. I’m guessing my error in entering the heading content\_type was the problem. Instead of hardcoding the secret API key into the application, I can have the user enter it…well an encoded version of it, so they don’t know the actual key. I can then decode it in the app. Woohoo!!!

---

<div class="post-metadata">

### Author: ![pinaxeg](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pinaxeg](https://community.thunkable.com/u/pinaxeg)
#### Post date: [May 26, 2024, 11:59pm UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/11 "2024-05-26T23:59:17Z")

</div>

The best practices to do so are described here I suppose [Web APIs Blocks | Drag and Drop | Thunkable Docs](https://docs.thunkable.com/blocks/advanced-app-features/web-api#setting-query-parameters-and-headers)

---

<div class="post-metadata">

### Author: ![pinaxeg](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pinaxeg](https://community.thunkable.com/u/pinaxeg)
#### Post date: [May 27, 2024, 12:00am UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/12 "2024-05-27T00:00:06Z")

</div>

Now we have better options [Web APIs Blocks | Drag and Drop | Thunkable Docs](https://docs.thunkable.com/blocks/advanced-app-features/web-api#setting-query-parameters-and-headers)

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 12:16pm UTC](https://community.thunkable.com/t/web-api-query-parameter-pass-variable-data/66598/13 "2024-11-08T12:16:22Z")

</div>


