ToolJet/docs/versioned_docs/version-2.68.0/how-to/pass-query-params-in-custom-components.md at 4c8c5381dd316cde9e518d19d34dea4e64fc765a

mirror of https://github.com/ToolJet/ToolJet synced 2026-04-22 14:07:26 +00:00

* 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

2024-09-13 19:23:19 +05:30

3.5 KiB

Raw Blame History

id	title
pass-query-params-in-custom-components	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:

https://jsonplaceholder.typicode.com/todos/{{parameters.id}}

Next, drag and drop a Custom Component on the canvas. Enter the code below under its Data property:

{{
    { 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:

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.

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

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 }).

3.5 KiB Raw Blame History

3.5 KiB

Raw Blame History