mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
97 lines
3.5 KiB
Markdown
97 lines
3.5 KiB
Markdown
---
|
|
id: pass-query-params-in-custom-components
|
|
title: Pass Query Parameters in Custom Components
|
|
---
|
|
|
|
In this guide, you'll learn how to trigger a query with parameters inside a Custom Component.
|
|
|
|
- To begin, create a **REST API** query with an `id` parameter, and rename it to *getIndividualTodo*.
|
|
|
|
- Select `GET` as the operation and enter the URL below under the `URL` property:
|
|
|
|
```javascript
|
|
https://jsonplaceholder.typicode.com/todos/{{parameters.id}}
|
|
```
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/use-query-params-in-custom-components/todo-query.png" alt="Table Component With Data" />
|
|
</div>
|
|
|
|
- Next, drag and drop a **Custom Component** on the canvas. Enter the code below under its `Data` property:
|
|
|
|
```javascript
|
|
{{
|
|
{ title: 'Todos', buttonText: 'Get Todo', queryData: queries.getIndividualTodo.data}
|
|
}}
|
|
```
|
|
|
|
Here, the title for the component, button text, and query data are being passed inside the Custom Component.
|
|
|
|
- Enter the code below under the `Code` property:
|
|
|
|
```javascript
|
|
import React, { useState, useEffect } from 'https://cdn.skypack.dev/react';
|
|
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
|
|
import { Button, Container, TextField, Typography } from 'https://cdn.skypack.dev/@material-ui/core';
|
|
|
|
const MyCustomComponent = ({ data, updateData, runQuery }) => {
|
|
const [todoId, setTodoId] = useState(1);
|
|
|
|
const fetchTodo = async () => {
|
|
try {
|
|
const { data: todo } = await runQuery('getIndividualTodo', { id: todoId });
|
|
if (todo) updateData({ ...data, queryData: todo });
|
|
} catch (error) {
|
|
console.error("Error fetching todo:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container>
|
|
<Typography variant="h4">{data.title}</Typography>
|
|
<TextField
|
|
label="Todo ID"
|
|
value={todoId}
|
|
onChange={(e) => setTodoId(e.target.value)}
|
|
variant="outlined"
|
|
margin="normal"
|
|
fullWidth
|
|
/>
|
|
<Button color="primary" variant="outlined" onClick={fetchTodo}>
|
|
Fetch Todo
|
|
</Button>
|
|
{data.queryData?.title && (
|
|
<div>
|
|
<p>ID: <b>{data.queryData.id}</b></p>
|
|
<p>Title: <b>{data.queryData.title}</b></p>
|
|
<p>Completed: <b>{data.queryData.completed ? "Yes" : "No"}</b></p>
|
|
</div>
|
|
)}
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
|
|
|
|
ReactDOM.render(<ConnectedComponent />, document.body);
|
|
```
|
|
|
|
In the `runQuery('getIndividualTodo', { id: todoId })` function, the parameter is passed by including `id: todoId` as an argument in the query call, which specifies the unique identifier for the todo item being requested.
|
|
|
|
<div style={{textAlign: 'left', width: '100%', marginTop:'15px', marginBottom:'15px'}}>
|
|
<img className="screenshot-full" src="/img/how-to/use-query-params-in-custom-components/todo-custom-component.png" alt="Custom Component" />
|
|
</div>
|
|
|
|
|
|
- Now, when you click the **Fetch Todo** button, the *getIndividualTodo* query will run with the Todo ID passed as a parameter and return the details of the Todo
|
|
|
|
<div style={{textAlign: 'left', width: '100%', marginTop:'15px', marginBottom:'15px'}}>
|
|
<img className="screenshot-full" src="/img/how-to/use-query-params-in-custom-components/todo-custom-component-with-data.png" alt="Custom Component With Todos Fetched" />
|
|
</div>
|
|
|
|
|
|
Note: In a typical JavaScript query, parameters are passed in a manner similar to a standard function call. For example, you can specify the parameters for the query using `queries.getIndividualTodo.run({ id: 2 })`.
|
|
|
|
|
|
|
|
|