afraid-scarlet•14mo ago

How would I handle lookup fields using the Airtable data provider?

I have tables which heavily rely on the use of lookup fields. When I get these records however, they of course just appear as, i.e. receGQu0WHJ3BzI4I when the desired result would be the actual name of that record, i.e., 124152345. How can I do this?

16 Replies

kapa.ai•14mo ago

Hi @jawmes.. 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. The information extracts provided do not contain specific details about handling lookup fields in tables using refine. However, in general, you might need to fetch the related data for these lookup fields separately and then map them to the corresponding records in your table. For more information, you can refer to the refine documentation here (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

afraid-scarletOP•14mo ago

What about handling relationships between tables? What about handling relationships between tables? hello @kapa.ai

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Hello! How can I assist you today? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

afraid-scarletOP•14mo ago

@kapa.ai What about handling relationships between tables?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, you can handle relationships between tables using the meta property in the useTable hook when using Supabase. The meta property is used to pass additional information that can be read by data provider methods. For example, if you have a many-to-many relationship like movies <-> categories_movies <-> categories, you can get the categories data of a user using the meta property as shown below:

const { tableProps, sorter } = useTable<IUser>({  
 resource: "movies",  
 meta: {  
 select: "*, categories!inner(name)",  
 },  
});

const { tableProps, sorter } = useTable<IUser>({  
 resource: "movies",  
 meta: {  
 select: "*, categories!inner(name)",  
 },  
});

In this example, the select value in the meta object is used to perform the relational database operation. The select property is used internally by the Supabase data provider methods. This information was found in a Discord support thread (https://discord.com/channels/837692625737613362/1126520565629472801). In another example from a refine blog post (https://refine.dev/blog/refine-pixels-3/), the public.users table has a one-to-many relationship with canvases and a canvas must belong to a user. Similarly canvases also has a one-to-many relationship with pixels. A canvas has many pixels and a pixel must belong to a canvas. Also, public.users has a one-to-many relationship with pixels. These relationships are defined in the SQL scripts used to create the tables. For example, the user_id field in the canvases table references the users table, establishing a relationship between the two tables. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

afraid-scarletOP•14mo ago

what about airtable @kapa.ai

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- When working with Airtable and refine, you can handle relationships between tables by mapping the fields to their corresponding records. For instance, if you have a posts table with a category field, you can map the category fields to their corresponding titles on the category base. First, you need to define the category type in your post.d.ts file under interfaces in the src folder:

export interface ICategory {  
 id: string;  
 name: string;  
 posts: string;  
}

export interface ICategory {  
 id: string;  
 name: string;  
 posts: string;  
}

(Source: refine blog (https://refine.dev/blog/react-crud-app-airtable/)) Then, you can use the useMany() hook to fetch records from the category base using the category field present on the posts table. This ensures that all the category fields are properly mapped to their respective records on the category base.

tableData?.data?.map((item) => item.category?.[0]) ?? [];  
  
 const { data: categoriesData } = useMany<ICategory>({  
 resource: "category",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  
  
 setOptions((prev) => ({  
 ...prev,  
 meta: {  
 ...prev.meta,  
 categoriesData,  
 },  
 }));

tableData?.data?.map((item) => item.category?.[0]) ?? [];  
  
 const { data: categoriesData } = useMany<ICategory>({  
 resource: "category",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  
  
 setOptions((prev) => ({  
 ...prev,  
 meta: {  
 ...prev.meta,  
 categoriesData,  
 },  
 }));

(Source: refine blog (https://refine.dev/blog/react-crud-app-airtable/)) This way, you can handle relationships between tables in Airtable using refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

afraid-scarletOP•13mo ago

The above example helps a lot and solved my issue @kapa.ai I want to extend this to my edit page, where I would like to allow the user to add records from another linked table. How would I do this? For example, the user can search for categories in a dropdown

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To allow users to add records from another linked table on the edit page, you can use a dropdown populated with data from the linked table. You can use the useSelect hook to fetch the data and populate the dropdown. Here's an example of how you can do this:

import { useForm, useSelect } from "@pankod/refine";

const { formProps, saveButtonProps, queryResult } = useForm<ICategory>({
    action: "edit",
});

const { selectProps: categorySelectProps } = useSelect<ICategory>({
    resource: "categories",
});

return (
    <Form {...formProps}>
        <Form.Item name="category" label="Category">
            <Select {...categorySelectProps} />
        </Form.Item>
        <Button {...saveButtonProps}>Save</Button>
    </Form>
);

import { useForm, useSelect } from "@pankod/refine";

const { formProps, saveButtonProps, queryResult } = useForm<ICategory>({
    action: "edit",
});

const { selectProps: categorySelectProps } = useSelect<ICategory>({
    resource: "categories",
});

return (
    <Form {...formProps}>
        <Form.Item name="category" label="Category">
            <Select {...categorySelectProps} />
        </Form.Item>
        <Button {...saveButtonProps}>Save</Button>
    </Form>
);

In this example, useForm is used to handle the form submission, and useSelect is used to fetch the categories and provide the props for the Select component. When the form is submitted, the selected category is included in the form data. Please note that this is a general example and you might need to adjust it according to your specific use case and data structure. For more information, you can refer to the refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

afraid-scarletOP•13mo ago

@kapa.ai I am using headless, does this make a difference?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: @jawmes. That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!