Issue with useShow
I have this code:
import { FC, useMemo } from "react";
import { useParams } from "react-router-dom";
import {
FilterDropdown,
SaveButton,
ShowButton,
useTable,
} from "@refinedev/antd";
import { HttpError, useCreateMany, useOne, useShow } from "@refinedev/core";
import { GetFields, GetFieldsFromList } from "@refinedev/nestjs-query";
import {
DeleteOutlined,
ExportOutlined,
MailOutlined,
PhoneOutlined,
PlusCircleOutlined,
SearchOutlined,
TeamOutlined,
UserOutlined,
} from "@ant-design/icons";
import {
Button,
Card,
Col,
Form,
Input,
Row,
Select,
Space,
Table,
} from "antd";
import { CustomAvatar, Text } from "@/components";
import { DriverCreateInput, VehicleType } from "@/graphql/schema.types";
import {
VehicleDriverGetVehicleQueryVariables,
VehicleDriverTableQuery,
} from "@/graphql/types";
import {
VEHICLEINFO_QUERY,
} from "./queries";
export const VehicleDriversTable: FC = () => {
const params = useParams();
const { queryResult } = useShow<VehicleType>({
resource: "vehicles",
id: params?.id,
meta: {
gqlQuery: VEHICLE_INFO_QUERY,
},
});
const { data, isLoading, isError } = queryResult;
return (
<Card
headStyle={{
borderBottom: "1px solid #D9D9D9",
marginBottom: "1px",
}}
bodyStyle={{ padding: 0 }}
title={
<Space size="middle">
<TeamOutlined />
<Text>Drivers</Text>
</Space>
}
extra={
<>
<Text className="tertiary">Total drivers: </Text>
<Text strong>
"asd"
</Text>
</>
}
>
<Table
{...data?.data}
rowKey="id"
>
<Table.Column<VehicleType>
title="VIN"
dataIndex="vin"
render={(, record) => {
return (
<Space>
<CustomAvatar name={record.vin} src={null} />
<Text
style={{
whiteSpace: "nowrap",
}}
>
{record.vin}
</Text>
</Space>
);
}}
filterIcon={<SearchOutlined />}
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Input placeholder="Search Name" />
</FilterDropdown>
)}
/>
<Table.Column
title="Title"
dataIndex="jobTitle"
filterIcon={<SearchOutlined />}
filterDropdown={(props) => (
<FilterDropdown {...props}>
<Input placeholder="Search Title" />
</FilterDropdown>
)}
/>
<Table.Column<VehicleType>
dataIndex="id"
width={112}
render={(value, record) => {
return (
<Space>
<Button
size="small"
href={mailto:${record.make}}
icon={<MailOutlined />}
/>
<Button
size="small"
href={tel:${record.model}}
icon={<PhoneOutlined />}
/>
<ShowButton
hideText
recordItemId={value}
size="small"
resource="drivers"
icon={<ExportOutlined />}
/>
</Space>
);
}}
/>
</Table>
</Card>
);
};
And I ahve an issue that the table isn't using the useShow properly
1 Reply
Hi @Valugar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Sorry @Valugar, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?