wise-white•2y 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

like-gold•2y 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?

wise-white•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

like-gold•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 🙏

wise-white•2y ago

Thanks @alicanerdurmaz , I will look at it

wise-white•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)

Your First Headless App using Tailwind.css | refine

Introduction

like-gold•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/

wise-white•2y ago

Yes I do @alicanerdurmaz On Airtable, a category comes with id and name fields

like-gold•2y 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",
});

wise-white•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

like-gold•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

    const handleSubmit = (values) => {
        onFinish({
            ...value,
            category:[values.category]
        });
    };

    const handleSubmit = (values) => {
        onFinish({
            ...value,
            category:[values.category]
        });
    };

wise-white•2y ago

Thanks so much @alicanerdurmaz .. worked 🔥🔥

like-gold•2y ago

awesome 🚀