mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-23 06:27:57 +00:00
bdfe3270e2
* docs: jira * docs: formatting + Client Credentials grant type * docs: connection string pgsql * docs: parameterized queries mysql * docs: parameterized queries in PostgreSQL * docs: update mysql example * docs: TJDB sql editor * docs: add metadata to REST API * docs: add, update postgresql media * docs: add metadata to graphql * docs: update parameterized queries * docs: add parameterized queries for mssql * docs: add SSL Cert to mysql * docs: TJDB SQL restricted commands * docs: update JIRA token location * docs: update delete issue example * docs: update find user by query example * docs: remove session id from get assignable users * docs: use correct image for get issues for board * docs: update create issue example * docs: update delete issue media * docs: update assignable users media * docs: update examples * docs: update key desc * docs: v2.68.0-Beta
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 })`.
|
|
|
|
|
|
|
|
|