raw-harlequin
raw-harlequin2y ago

mapping relationships in Refine Airtable for Headless approach

Hello, I wish to ask if there’s a sample for implementing mapping of relationships in refine-airtable There is a sample for the ant-design implementation on the doc (https://refine.dev/docs/examples/data-provider/airtable/) but the headless approach isn’t available Thanks.
Airtable | refine
By using refine`s full-featured Airtable Data Provider, it allows you to access your data quickly without any additional setup or coding. The following example will show you how to use your Airtable data within the refine project.
12 Replies
narrow-beige
narrow-beige2y ago
when you say mapping, do you mean this ?
const { tableProps } = useTable<IPost>();

const categoryIds = tableProps?.dataSource?.flatMap((p) => p.category);
const { data, isLoading } = useMany<ICategory>({
resource: "categories",
ids: categoryIds || [],
queryOptions: {
enabled: categoryIds !== undefined,
},
});

<Table.Column<IPost>
dataIndex={"category"}
title="Category"
render={(_, record) => {
if (isLoading) {
return <TextField value="Loading..." />;
}

return (
<TextField
value={data?.data
.filter((item) =>
record.category?.includes(item.id),
)
.map((p) => p.title)
.join(", ")}
/>
);
}}
/>
const { tableProps } = useTable<IPost>();

const categoryIds = tableProps?.dataSource?.flatMap((p) => p.category);
const { data, isLoading } = useMany<ICategory>({
resource: "categories",
ids: categoryIds || [],
queryOptions: {
enabled: categoryIds !== undefined,
},
});

<Table.Column<IPost>
dataIndex={"category"}
title="Category"
render={(_, record) => {
if (isLoading) {
return <TextField value="Loading..." />;
}

return (
<TextField
value={data?.data
.filter((item) =>
record.category?.includes(item.id),
)
.map((p) => p.title)
.join(", ")}
/>
);
}}
/>
Are you looking for an example of the table that shows the data of another resource? and this example should use air-table and be headless?
raw-harlequin
raw-harlequin2y ago
Yes @alicanerdurmaz This is because the useTable() hook for ant-design and the headless are different and are from different packages And their implementation different
narrow-beige
narrow-beige2y ago
you can follow this example https://refine.dev/docs/tutorials/headless-tutorial/#handling-relationships data-provider dosen't matter. this is the beauty of refine's abstraction 🙏
raw-harlequin
raw-harlequin2y ago
Thanks @alicanerdurmaz , I will look at it
raw-harlequin
raw-harlequin2y ago
Hello @alicanerdurmaz , I have been able to get that to work.. thanks for pointing me to the right direction🙂 Although still i still need some clarification on 2 issues I’m experiencing as well: 1- I used the useSelect hook to map data from an airtable base and I’m getting undefined in some of data output from the hook despite having the data on my airtable base (Documentation used: https://refine.dev/docs/tutorials/headless-tutorial/#creating-a-record) Eg: const {options} = useSelect({ resource: ‘category’ }) console.log(options) // output [{label: undefined, value: ‘i2343’ ] Because the label is undefined, I’m unable to see the label text of the category added to the select tag on a page in my refine application 2- on editing an existing record on Airtable using the useForm() hook, is there a way to pass a value as a array of string with the hook?. This is because on editing one of the record (which is a category record with has a relationship with another airtable base), I’ll need to pass that record as an array of ids (String[]) in order for that record to be updated on that base (Documentation used: https://refine.dev/docs/tutorials/headless-tutorial/#editing-a-record)
narrow-beige
narrow-beige2y ago
1- useSelect do you have label with another key in air-table ? you can change keys https://refine.dev/docs/api-reference/core/hooks/useSelect/#optionlabel-and-optionvalue 2-) is this what you looking for ? https://stackblitz.com/edit/refinedev-refine-vrz8ce?file=src%2Fpages%2Fposts%2Flist.tsx&preset=node or you can youse useFieldArray for more comprehensive implementation. import { useForm, useFieldArray } from '@pankod/refine-react-hook-form'; https://react-hook-form.com/api/usefieldarray/
raw-harlequin
raw-harlequin2y ago
Yes I do @alicanerdurmaz On Airtable, a category comes with id and name fields
narrow-beige
narrow-beige2y ago
you can change keys with this https://refine.dev/docs/api-reference/core/hooks/useSelect/#optionlabel-and-optionvalue
const { options } = useSelect({
optionLabel: "name",
optionValue: "id",
});
const { options } = useSelect({
optionLabel: "name",
optionValue: "id",
});
raw-harlequin
raw-harlequin2y ago
This is a bit different from what I’m looking for An example of my explanation const { options } = useSelect({ resource: “category” }) <select defaultValue={“”} {…register(“category”, { required: true} > { options?.map((category) => ( <option key={category.value} value={category.value}> {category.value} </option> ))} </select> In this code above, I want to be able to send category as an array of ids/string (eg [“rec2444dd”]) and also, when the hook form is sending the category value to the airtable base, it should go in the format of { category: [“rechhrtt12”] } Ok… tested this out and it worked.. thanks🙂 @alicanerdurmaz
narrow-beige
narrow-beige2y ago
im glad to hear that 🙏 easiest way to do this, you can change value before send to api. https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api
const handleSubmit = (values) => {
onFinish({
...value,
category:[values.category]
});
};
const handleSubmit = (values) => {
onFinish({
...value,
category:[values.category]
});
};
raw-harlequin
raw-harlequin2y ago
Thanks so much @alicanerdurmaz .. worked 🔥🔥
narrow-beige
narrow-beige2y ago
awesome 🚀