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
correct-apricot•2y ago
when you say mapping, do you mean this ?
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?xenial-black•2y 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
correct-apricot•2y 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 🙏xenial-black•2y ago
Thanks @alicanerdurmaz , I will look at it
xenial-black•2y 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)
correct-apricot•2y 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/xenial-black•2y ago
Yes I do @alicanerdurmaz
On Airtable, a category comes with id and name fields
correct-apricot•2y ago
you can change keys with this
https://refine.dev/docs/api-reference/core/hooks/useSelect/#optionlabel-and-optionvalue
xenial-black•2y 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
correct-apricot•2y 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
xenial-black•2y ago
Thanks so much @alicanerdurmaz .. worked 🔥🔥
correct-apricot•2y ago
awesome 🚀