Trying to extract a query string from the retool app url and execute an API Call

Queries and Resources
1
  1. I created an API resource where the endpoint is - https://vckwcepgospqxxevumys.supabase.co/rest/v1/company
  2. I add a query to to my page/application, set it to run manually (name is "query1" for the sake of testing)
  3. Then I add a JS Code to execute the API in hopes of getting the data back and manually populating fields on my form.
  4. For simplicity, I use the following code snippet to extract the query string from the URL and trigger my query.

// Define the parameter value
const url = new URL(urlparams.href);
const companyNumber = url.searchParams.get('company_number'); //value of 000000000000009

// Call the query and pass the parameter
query1.trigger({
additionalScope: {
comp_num: paramValue
},
onSuccess: (data) => {
//parse the data object
console.log("Query succeeded:", data);
},
onFailure: (error) => {
console.log("Query failed:", error);
}
});

  • Details:
    The code snippet seems correct. When I tinker with the query I am seeing that either I get "all" records back from the table or an error. Basically it is not accepting my parameter. I tried using the URL parameters but no matter what I do, it fails. Can anyone tell me what I need to modify in the query?

  • Screenshots:

    image
    image901×523 33 KB

2 Likes
3

Hi @Robbie_Williams,

Thanks for reaching out!

Based on that code snippet, it looks like paramValue isn't defined anywhere. If you want to pass the companyNumber to query1, you'll need to modify the Javascript so that the additionalScope looks like this:

additionalScope: {
comp_num: companyNumber
},

Then, you also need to modify query1 to use the additionalScope param. You can replace * in your query1 with {{comp_num}}. {{comp_num}} will show up in query1 as red/not defined, which is the expected behavior. It'll get defined when you run the setCompNumVariable Javascript query

Let me know how that goes!

1 Like
4

Thank you Tess for the follow up. I think I am getting close. My JS code is as follows as a test
// Define the parameter value
const paramValue = '000000000000008';

// Call the query and pass the parameter
query1.trigger({
additionalScope: {
comp_num: paramValue
},
onSuccess: (data) => {
console.log("Query succeeded:", data);
},
onFailure: (error) => {
console.log("Query failed:", error);
}
});

Then in query1, I have the URL parameters set as
comp_num: {{comp_num}}

This seems to be passing in the {{comp_num}} parameter correct. I can see the following in debug console.
image

Looks like the problem is in the endpoint. My endpoint in the API resource is as follows:
https://vckwcepgospqxxevumys.supabase.co/rest/v1/company
image
However when I look at the request, it is appending a "/" to the end of the endpoin
"https://vckwcepgospqxxevumys.supabase.co/rest/v1/company/"
So the request is being sent as:
https://vckwcepgospqxxevumys.supabase.co/rest/v1/company/?comp_num=000000000000008
which is causing the issue. I am not seeing why the "/" is being appended to the endpoint. Thanks again for your help.

5

Hi @Robbie_Williams Thanks for the update! It looks similar to this issue. Could you remove company from the base url and add it manually to your query?

6

@Tess Thank you Thank you Thank you! I am newer to the retool platform and for some reason I was on that one for awhile. That is a big hurdle to clear in my development. Very much appreciate your help!

1 Like
7

Welcome to Retool! :blush: Let us know if other questions come up!

1 Like