deep-jade•15mo ago

show data from another table on show/id page

Hi, I'm using supabase as DB Now I have a table named component_arrivals. on this table, I have a field named lot contain a list of lot from lot table. Now can I show the expire_date from lot table in component_arrivals show page?

8 Replies

kapa.ai•15mo ago

Hi @tandeptraiso1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided in the extracts, you can use the useMany hook in Refine to fetch related data from another resource. Here's a general example from the extracts:

const { data: relatedData } = useMany<IYourDataType>({  
 resource: "relatedResource",  
 ids: relatedIds,  
});

const { data: relatedData } = useMany<IYourDataType>({  
 resource: "relatedResource",  
 ids: relatedIds,  
});

In your case, you would replace IYourDataType with the TypeScript interface of your lot data, relatedResource with "lot", and relatedIds with the ids of the lots you want to fetch. Then, you can use this data in your show page. However, the exact implementation would depend on your specific data structure and requirements. For more detailed information, you might want to check out the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

deep-jadeOP•15mo ago

@kapa.ai I'm implemented by useList like this

const { data: lotComponentsProps, isLoading: lotLoading } = useList<IResourceComponentsProps>({
    resource: "lot",
    filters: [{
      field: "manufacturing_number",
      operator: "in",
      value: record?.lot,
  },],
    queryOptions: {
      enabled: !!record?.lot,
    },
  });

const { data: lotComponentsProps, isLoading: lotLoading } = useList<IResourceComponentsProps>({
    resource: "lot",
    filters: [{
      field: "manufacturing_number",
      operator: "in",
      value: record?.lot,
  },],
    queryOptions: {
      enabled: !!record?.lot,
    },
  });

now I want to show it on UI by

{lotComponentsProps?.data.map(lot=>(
          <div>
            <TextField value={translate("lot.manufacturingNumber")}></TextField>
            <TextField value={lot.manufacturing_number || ""} />
          </div>
        ))}

{lotComponentsProps?.data.map(lot=>(
          <div>
            <TextField value={translate("lot.manufacturingNumber")}></TextField>
            <TextField value={lot.manufacturing_number || ""} />
          </div>
        ))}

but the typescript for lot.manufacturing_number showing error Property 'manufacturing_number' does not exist on type 'IResourceComponentsProps<any, { [key: string]: any; }, ILogData>' can you help me bypass this?

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The TypeScript error you're encountering is because the manufacturing_number field is not defined in your IResourceComponentsProps interface. TypeScript is a statically typed language, which means you need to define the types of your variables and objects upfront. To resolve this issue, you need to ensure that the manufacturing_number field is included in your IResourceComponentsProps interface. Here's an example of how you can do this:

interface IResourceComponentsProps {
  // other fields...
  manufacturing_number?: string;
  // other fields...
}

interface IResourceComponentsProps {
  // other fields...
  manufacturing_number?: string;
  // other fields...
}

In this example, manufacturing_number is defined as an optional string field. This means it can either be a string or undefined. If you're sure that manufacturing_number will always be a string, you can remove the ? to make it a required field. After updating your interface, your useList hook and map function should work as expected without TypeScript errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

deep-jadeOP•15mo ago

@kapa.ai I can get the list from supabase by useList like this const { data: lotComponentsProps, isLoading: lotLoading } = useList<ILotComponentsProps>({ resource: "lot", filters: [{ field: "manufacturing_number", operator: "in", value: record?.lot, },], queryOptions: { enabled: !!record?.lot, }, }); Now I want to display it inside the componentArrivals/show/id by antd table, can you help me?

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can display the data fetched with useList in an Ant Design Table. Here's a basic example of how you can do this:

import { Table } from "antd";

// Inside your component
if (isLoading) {
  return <div>Loading...</div>;
}

return (
  <Table dataSource={lotComponentsProps?.data} rowKey="id">
    <Table.Column title="Manufacturing Number" dataIndex="manufacturing_number" key="manufacturing_number" />
    {/* Add more columns as needed */}
  </Table>
);

import { Table } from "antd";

// Inside your component
if (isLoading) {
  return <div>Loading...</div>;
}

return (
  <Table dataSource={lotComponentsProps?.data} rowKey="id">
    <Table.Column title="Manufacturing Number" dataIndex="manufacturing_number" key="manufacturing_number" />
    {/* Add more columns as needed */}
  </Table>
);

In this example, dataSource is set to the data you fetched with useList. rowKey is set to "id", assuming each of your data items has a unique id field. If not, replace "id" with the name of a unique field in your data. Each Table.Column represents a column in your table. The title prop sets the column title, dataIndex sets which field from your data should be displayed in this column, and key is a unique identifier for this column. You can add more Table.Column components as needed to display more fields from your data. Please replace "manufacturing_number" and "id" with the actual field names in your data if they are different. For more detailed information, you might want to check out the Ant Design Table documentation (https://ant.design/components/table/) and the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

show data from another table on show/id page

Did you find this page helpful?