afraid-scarlet•8mo ago

How to rename the tab/menu name and how to use multiple schema in supabase?

Hi everyone. I would like to ask you about 2 things. 1. In the tab menu, because of the nature of refine dev and im using view mode in supabase, i use view_booking that result from booking and so on, can i use different tab or menu name from the data that i provide from my supabase 2. If i want to use 2 different schema how i can do it in the supabase in refine?

14 Replies

kapa.ai•8mo ago

Hi @Alka. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello! 1. To rename the tab/menu name in Refine, you can use the name prop in the Resource component. This allows you to set a custom name for your resource that will be displayed in the menu. Unfortunately, the information extracts provided do not contain a specific code example for this. You can refer to the Refine documentation for more details. 2. To use multiple schemas in Supabase with Refine, you can utilize the swizzle command to have the implementation of the @refinedev/supabase's dataProvider and liveProvider copied in your project. After that, you can add a feature that allows you to pick schemas instead of passing it once when creating the Supabase client. Here's an example of how to implement the multiple schema feature in the create method:

create: async ({ resource, variables, meta }) => {
-    const query = supabaseClient.from(resource).insert(variables);
+    const query = supabaseClient.schema(meta?.schema ?? "public").from(resource).insert(variables);

    if (meta?.select) {
        query.select(meta.select);
    }

    const { data, error } = await query;

    if (error) {
        return handleError(error);
    }

    return {
        data: (data || [])[0] as any,
    };
},

create: async ({ resource, variables, meta }) => {
-    const query = supabaseClient.from(resource).insert(variables);
+    const query = supabaseClient.schema(meta?.schema ?? "public").from(resource).insert(variables);

    if (meta?.select) {
        query.select(meta.select);
    }

    const { data, error } = await query;

    if (error) {
        return handleError(error);
    }

    return {
        data: (data || [])[0] as any,
    };
},

This code allows you to specify the schema when making a query. You can apply this change to other methods as well. Please note that this is a workaround and might not be the best practice. It's recommended to check with the Supabase community or support for the best way to handle multiple schemas. For more details, you can refer to this Github discussion (https://github.com/refinedev/refine/discussions/5094). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

afraid-scarlet•8mo ago

@kapa.ai for the renaming tab cak you give me some documentation or reference that i can look into?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can refer to the Refine documentation for more details on how to use the Resource component, which includes the name prop for setting a custom name for your resource. Unfortunately, the specific documentation link is not provided in the information extracts above. However, you can easily find it on the official Refine documentation website. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

afraid-scarlet•8mo ago

''' { name: "bookings", list: "/view_booking", create: "/view_booking/create", edit: "/view_booking/edit/:id", show: "/view_booking/show/:id", meta: { canDelete: true, }, }, ''' Correct but when i change the name inside of the resource, the dataprovider try to referencing other table that i have like i want to use: menu name: booking table referenced in db: view_booking but instead i get menu name: booking table referenced in db: booking @kapa.ai

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, the name prop in the Resource component is used to define both the menu name and the table that the data provider references. If you want to use a different name for the menu and the table, you can use the resource prop in the Resource component. The resource prop defines the table that the data provider references, while the name prop defines the menu name. Here's how you can do it:

{
    name: "booking",
    resource: "view_booking",
    list: "/view_booking",
    create: "/view_booking/create",
    edit: "/view_booking/edit/:id",
    show: "/view_booking/show/:id",
    meta: {
        canDelete: true,
    },
}

{
    name: "booking",
    resource: "view_booking",
    list: "/view_booking",
    create: "/view_booking/create",
    edit: "/view_booking/edit/:id",
    show: "/view_booking/show/:id",
    meta: {
        canDelete: true,
    },
}

In this example, "booking" will be the name displayed in the menu, and "view_booking" will be the table that the data provider references. Please note that this feature might not be available in all versions of Refine. If you encounter any issues, please check the version of Refine you are using and consider updating to the latest version if necessary. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

afraid-scarlet•8mo ago

@kapa.ai i got this issues resource: "view_booking", Object literal may only specify known properties, and 'resource' does not exist in type 'ResourceProps'.ts(2353) and can use different schema for different routes?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The resource prop is not a valid prop for the Resource component in Refine. The name prop is used to define both the menu name and the table that the data provider references. If you want to use a different name for the menu and the table, you would need to create a custom data provider that maps the resource names to the correct table names. As for using different schemas for different routes, the information provided in the extracts does not cover this topic. However, it's worth noting that there's an open issue on GitHub about using a different schema for Supabase that results in a build error. The user tried to change the schema from "public" to something else and encountered an error. This suggests that using different schemas for different routes might not be straightforward and could require additional configuration or workarounds. For more detailed guidance, I recommend checking the official Refine and Supabase documentation or reaching out to their respective communities for support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

afraid-scarlet•8mo ago

i have another questions if im using view mode in supabase, and i want to do some editing, deleting, and so on in refine, how i can do the operations in different table? @kapa.ai

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're using a view in Supabase, you won't be able to perform write operations such as editing and deleting directly on the view. This is because a view in a database is a stored query, and not a table with physical records. However, you can perform these operations on the underlying tables that the view is based on. You would need to create a custom data provider in Refine that maps the operations to the correct tables. Here's a simplified example of how you might implement this:

const myDataProvider = {
    ...supabaseDataProvider(supabaseClient),
    update: async (resource, params) => {
        if (resource === 'my_view') {
            resource = 'my_table';
        }
        return supabaseDataProvider(supabaseClient).update(resource, params);
    },
    delete: async (resource, params) => {
        if (resource === 'my_view') {
            resource = 'my_table';
        }
        return supabaseDataProvider(supabaseClient).delete(resource, params);
    },
    // ... implement other methods similarly
}

const myDataProvider = {
    ...supabaseDataProvider(supabaseClient),
    update: async (resource, params) => {
        if (resource === 'my_view') {
            resource = 'my_table';
        }
        return supabaseDataProvider(supabaseClient).update(resource, params);
    },
    delete: async (resource, params) => {
        if (resource === 'my_view') {
            resource = 'my_table';
        }
        return supabaseDataProvider(supabaseClient).delete(resource, params);
    },
    // ... implement other methods similarly
}

In this example, my_view is the name of your view, and my_table is the name of the table you want to perform the operations on. You would need to replace these with the actual names of your view and table. Please note that this is a simplified example and might not cover all cases. Depending on how your view and tables are set up, you might need to handle the mapping of fields and other details differently. For more detailed guidance, I recommend checking the official Refine and Supabase documentation or reaching out to their respective communities for support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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