optimistic-gold•5mo ago

How do I pass variable in useTable

const { tableProps } = useTable({ resource: "sensorData", meta: { gqlQuery: GET_SENSOR_DATA_QUERY, gqlvariables: { topic_id: id }, // <- Something like this }, });

8 Replies

kapa.ai•5mo ago

Hi @Ennis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can pass variables to the useTable hook in the meta property. The meta property is used to pass additional information to data provider methods. Here's an example of how you can pass variables:

const { tableProps } = useTable({  
 meta: {  
  gqlQuery: GET_SENSOR_DATA_QUERY,
  gqlvariables: { topic_id: id },
 },  
});

const { tableProps } = useTable({  
 meta: {  
  gqlQuery: GET_SENSOR_DATA_QUERY,
  gqlvariables: { topic_id: id },
 },  
});

In this example, gqlQuery and gqlvariables are passed in the meta object. You can pass any properties to specifically handle the data provider methods. For more information, refer to the meta section of the General Concepts documentation → (https://refine.dev/docs/guides-concepts/general-concepts/#meta-concept) [^1^]. [^1^]: (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#meta) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@293351642122944512> kapa.ai is still learning and improving, please let us know how it did by reacting below

optimistic-gold•5mo ago

@kapa.ai I tried

const { tableProps } = useTable({
    resource: "sensorData",
    meta: {
      gqlQuery: GET_SENSOR_DATA_QUERY,
      gqlvariables: { topic_id: id },
    },
  });

const { tableProps } = useTable({
    resource: "sensorData",
    meta: {
      gqlQuery: GET_SENSOR_DATA_QUERY,
      gqlvariables: { topic_id: id },
    },
  });

but in the network tab the query still didnt include topic_id

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The meta property in the useTable hook is used to pass additional information to data provider methods. However, the way this information is handled depends on the implementation of your data provider. In your case, you're trying to pass a GraphQL query (gqlQuery) and variables (gqlvariables) through the meta property. This will only work if your data provider is set up to handle these specific properties (gqlQuery and gqlvariables) and use them to make the request. If you're not seeing the topic_id in your network tab, it's likely that your data provider isn't using the gqlvariables property from meta to construct the request. You might need to customize your data provider to handle these properties. Here's a general example of how a data provider method might use the meta property:

const myDataProvider = {  
 //...  
 getList: async ({  
 resource,  
 pagination,  
 sorters,  
 filters,  
 meta,  
 }) => {  
 const gqlQuery = meta?.gqlQuery;
 const gqlvariables = meta?.gqlvariables;

 // Use gqlQuery and gqlvariables to make the request
 //...

 const { data, headers } = await httpClient.get(`${url}`, { headers });  
  
 return {  
 data,  
 };  
 },  
 //...  
};

const myDataProvider = {  
 //...  
 getList: async ({  
 resource,  
 pagination,  
 sorters,  
 filters,  
 meta,  
 }) => {  
 const gqlQuery = meta?.gqlQuery;
 const gqlvariables = meta?.gqlvariables;

 // Use gqlQuery and gqlvariables to make the request
 //...

 const { data, headers } = await httpClient.get(`${url}`, { headers });  
  
 return {  
 data,  
 };  
 },  
 //...  
};

Please refer to the Refine documentation on data providers (https://refine.dev/docs/core/providers/data-provider) for more information on how to customize your data provider. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@293351642122944512> kapa.ai is still learning and improving, please let us know how it did by reacting below

optimistic-gold•5mo ago

@kapa.ai Whats the best practice if I have a page that I have a table and graph for the same set of data

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The best practice would be to fetch the data once and then pass it to both the table and the graph components. This way, you avoid making multiple requests for the same data, which can improve the performance of your application. Refine's useTable hook can be used to fetch the data and pass it to the Ant Design's <Table /> component. The data can also be passed to your graph component. Here's a basic example:

import { useTable } from "@refinedev/antd";  
import { Table } from "antd";  
import MyGraphComponent from './MyGraphComponent';

const MyPage = () => {  
 const { tableProps } = useTable({  
  resource: "myResource",
 });  
  
 return (  
  <div>
   <Table {...tableProps} rowKey="id" />  
   <MyGraphComponent data={tableProps.dataSource} />
  </div>
 );  
};

import { useTable } from "@refinedev/antd";  
import { Table } from "antd";  
import MyGraphComponent from './MyGraphComponent';

const MyPage = () => {  
 const { tableProps } = useTable({  
  resource: "myResource",
 });  
  
 return (  
  <div>
   <Table {...tableProps} rowKey="id" />  
   <MyGraphComponent data={tableProps.dataSource} />
  </div>
 );  
};

In this example, useTable is used to fetch the data for a resource named "myResource". The fetched data is passed to the <Table /> component through tableProps. The same data is also passed to MyGraphComponent through the dataSource property of tableProps. Please note that this is a simplified example. Depending on your requirements, you might need to transform the data before passing it to the graph component. For more information on how to use useTable, refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@293351642122944512> kapa.ai is still learning and improving, please let us know how it did by reacting below