-
Goal: To call an API configured on the retool app from inside my custom component to "send a message"
-
Steps: Write in the input fields, click the button, call the resource query (API call).
-
Details: I have a resource query which more specifically is an API call in my retool app:
Inside my custom component I have an input text and a button:
I want to call the API from the custom component when the user clicks on the button and I want to use the text written in the input as the body of my API call.
ChatGPT told me to use window.retool.eventQueries but I guess it doesn't work
3 Likes
Hello @pepematt and welcome to the retool community.
If im understanding your question correctly I think what I did with my button could work here.
I have this
const onClick = Retool.useEventCallback({ name: "click" });
and then this is my button. There is a bunch of color stuff for hovering and whatnot but the import bit here is the onclick part
<button
style={{
backgroundColor: disabled
? disabledColor
: isHovered
? hoverColor
: color, // Default background color
color: disabled
? "#000000"
: isHovered
? color // Use default color on hover
: hoverColor, // Default text color
padding: "0px 0px 0px 0px",
border: `2px solid ${color ?? "#5ab237"}`,
borderRadius: isTabbedContainerButton ? '20px' :"5px",
cursor: "pointer",
transition: "all 0.3s ease",
width: "100%",
height: "100%",
boxSizing: "border-box",
fontFamily: "'Open Sans', sans-serif",
fontWeight: "600", // Semi-bold weight
fontSize: fontSize || "24px",
}}
disabled={disabled}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onClick={disabled ? undefined : onClick}
>
{name || "Default Text"} {/* Display text from props */}
</button>
which then lets me set the click event in the inspector like any other button.
1 Like
To call a resource query from inside a custom component, you can use tools like React Query or the native fetch API. With React Query, install the library, create a query function (e.g., fetching data via an API), and use the useQuery
hook inside your component to handle the data, loading, and error states seamlessly. This approach is efficient as React Query manages caching, refetching, and state updates for you, making it ideal for scalable applications.
Alternatively, you can use the fetch
API with React's useEffect
and useState
. Within useEffect
, make an asynchronous call to fetch the resource, update the component's state, and handle errors or loading indicators appropriately. While this method works, it requires more manual setup compared to React Query, such as handling caching and refetching manually. Choose the approach that best fits your application's complexity and data-fetching needs.
Hi Michael, that's not what I was looking for. I can indeed call the API from inside my component but I have all my auth on the retool app so I want to call from the resource queries. Let's say I want to call my API and I don't want to set header tokens like "Bearer xxxxxx" in the code. The benefit of using retool app is that I can configure that in one API call and use it for all components
Hi James, that's basically what I am looking for. The thing is, looks like I am just triggering something on the retool app. What about passing some parameters to the trigger? Probably the catch is to have a variable in the retool app, then before triggering the event I set the value of the variable and use it as the payload for my API call. Well, thank you
maybe something like this?
const [fontSize] = Retool.useStateString({
name: "Font Size"
});
I use this to pass in a font size, but I think it could just as easily pass in whatever variable you have.