helpful-purple•6mo ago

How to get relational data?

import { useResourceParams, useTable } from "@refinedev/core"; import { Card, Table } from "antd"; import React from "react"; import { useParams } from "react-router-dom"; export const CompanyContactsTable = () => { const params = useParams(); const { tableProps } = useTable({ resource: "contacts", }); return ( <Card title="contacts"> <Table {...tableProps} rowKey="id"> <Table.Column title="name" dataIndex="name" /> </Table> </Card> ); }; how can i get the conacts details when a user clicks on a company from the company page?

2 Replies

kapa.ai•6mo ago

Hi @daw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To fetch relational data in Refine, you can use the useMany hook. This hook fetches the data for the relevant posts or any other relational data you need. Here is an example of how you can use it:

import { HttpError, useMany, getDefaultFilter } from "@refinedev/core";  
import { List, TagField, useTable, useSelect, FilterDropdown } from "@refinedev/antd";  
import { Table, Select } from "antd";  

// Define your interfaces
interface ICategory {  
 id: number;  
 title: string;  
}  

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
 category: {  
 id: number;  
 };  
}  

const PostList: React.FC = () => {  
 const { tableProps, filters } = useTable<IPost, HttpError>();  

 // Creates the array of ids. This will filter and fetch the category data for the relevant posts.  
 const categoryIds = tableProps.dataSource?.map((p) => p.category.id.toString()) || [];  

 // Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
 const { data, isFetching } = useMany<ICategory>({  
 resource: "categories",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  

 // Rest of your code...
};

import { HttpError, useMany, getDefaultFilter } from "@refinedev/core";  
import { List, TagField, useTable, useSelect, FilterDropdown } from "@refinedev/antd";  
import { Table, Select } from "antd";  

// Define your interfaces
interface ICategory {  
 id: number;  
 title: string;  
}  

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
 category: {  
 id: number;  
 };  
}  

const PostList: React.FC = () => {  
 const { tableProps, filters } = useTable<IPost, HttpError>();  

 // Creates the array of ids. This will filter and fetch the category data for the relevant posts.  
 const categoryIds = tableProps.dataSource?.map((p) => p.category.id.toString()) || [];  

 // Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
 const { data, isFetching } = useMany<ICategory>({  
 resource: "categories",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  

 // Rest of your code...
};

In this example, useMany is used to fetch the category data for each post. It takes the resource and ids as parameters. The resource is the endpoint from where the data is fetched, and ids is an array of ids that you want to fetch. The queryOptions parameter is used to enable or disable the query based on certain conditions. You can adapt this example to your needs by replacing "posts" and "categories" with "companies" and "contacts" respectively. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#how-can-i-handle-relational-data). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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