How to insert Supabase many-to-many from Refine?

How to insert Supabase many-to-many from Refine

5 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To insert many-to-many relationships in Supabase from Refine, you need to handle the intermediary table that represents the many-to-many relationship. Here’s a step-by-step guide on how to achieve this: Step 1: Define Your Tables Assume you have the following tables: - posts table: id, title - categories table: id, name - posts_categories table: post_id, category_id (composite primary key) Step 2: Create the Relationship in Supabase Ensure that your posts_categories table is set up correctly with a composite primary key. This is necessary for the select expression to work. Step 3: Modify the Form Data Before Submitting When creating a new post and associating it with multiple categories, you need to handle the form data appropriately. You can use the useCreate or useCreateMany hooks from Refine to insert data into the posts_categories table. Here’s an example of how you can modify the form data before submitting it:

import { useForm, useCreate, useCreateMany } from "@refinedev/react-hook-form";

const PostCreate = () => {
    const { saveButtonProps, formProps } = useForm({
        onSubmit: async (values) => {
            // Remove categories field from the post data
            const { categories, ...postValues } = values;

            // Create the post
            const { data: post } = await useCreate({
                resource: "posts",
                variables: postValues,
            });

            // Create the relationships in the posts_categories table
            const postCategories = categories.map((category) => ({
                post_id: post.id,
                category_id: category.id,
            }));

            await useCreateMany({
                resource: "posts_categories",
                variables: postCategories,
            });
        },
    });
return (
        <form {...formProps}>
            {/* Your form fields here */}
            <button {...saveButtonProps}>Save</button>
        </form>
    );
};

import { useForm, useCreate, useCreateMany } from "@refinedev/react-hook-form";

const PostCreate = () => {
    const { saveButtonProps, formProps } = useForm({
        onSubmit: async (values) => {
            // Remove categories field from the post data
            const { categories, ...postValues } = values;

            // Create the post
            const { data: post } = await useCreate({
                resource: "posts",
                variables: postValues,
            });

            // Create the relationships in the posts_categories table
            const postCategories = categories.map((category) => ({
                post_id: post.id,
                category_id: category.id,
            }));

            await useCreateMany({
                resource: "posts_categories",
                variables: postCategories,
            });
        },
    });
return (
        <form {...formProps}>
            {/* Your form fields here */}
            <button {...saveButtonProps}>Save</button>
        </form>
    );
};

Step 4: Handle Filtering by Categories To filter posts by categories in a many-to-many relationship, you can use the metaData.select option in the useTable hook:

useTable({
    metaData: {
        select: "*, categories(name)",
    },
});

useTable({
    metaData: {
        select: "*, categories(name)",
    },
});

This setup ensures that the data retrieved includes the related categories. Additional Resources - Refine Documentation on useForm (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api) - Supabase Documentation on Querying Foreign Tables (https://supabase.com/docs/reference/javascript/select#query-foreign-tables-through-a-join-table) By following these steps, you can effectively manage many-to-many relationships in Supabase using Refine. If you need more detailed examples or run into issues, feel free to check out the Refine Supabase Example (https://github.com/refinedev/refine/tree/master/examples/data-provider-supabase) or reach out to the community for support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

metropolitan-bronze•2mo ago

@kapa.ai How to update Supabase many-to-many from Refine?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To update many-to-many relationships in Supabase from Refine, you need to handle the intermediary table that represents the many-to-many relationship. Here’s a step-by-step guide on how to achieve this: Step 1: Define Your Tables Assume you have the following tables: - posts table: id, title - categories table: id, name - posts_categories table: post_id, category_id (composite primary key) Step 2: Modify the Form Data Before Submitting When updating a post and its associated categories, you need to handle the form data appropriately. You can use the useUpdate and useCreateMany hooks from Refine to update data in the posts table and manage the relationships in the posts_categories table. Here’s an example of how you can modify the form data before submitting it:

import { useForm, useUpdate, useCreateMany, useDeleteMany } from "@refinedev/react-hook-form";

const PostEdit = () => {
    const { saveButtonProps, formProps } = useForm({
        onSubmit: async (values) => {
            // Remove categories field from the post data
            const { categories, ...postValues } = values;

            // Update the post
            const { data: post } = await useUpdate({
                resource: "posts",
                id: postValues.id,
                variables: postValues,
            });

            // Delete existing relationships in the posts_categories table
            await useDeleteMany({
                resource: "posts_categories",
                ids: categories.map((category) => ({
                    post_id: post.id,
                    category_id: category.id,
                })),
            });
// Create new relationships in the posts_categories table
            const postCategories = categories.map((category) => ({
                post_id: post.id,
                category_id: category.id,
            }));

            await useCreateMany({
                resource: "posts_categories",
                variables: postCategories,
            });
        },
    });

    return (
        <form {...formProps}>
            {/* Your form fields here */}
            <button {...saveButtonProps}>Save</button>
        </form>
    );
};

import { useForm, useUpdate, useCreateMany, useDeleteMany } from "@refinedev/react-hook-form";

const PostEdit = () => {
    const { saveButtonProps, formProps } = useForm({
        onSubmit: async (values) => {
            // Remove categories field from the post data
            const { categories, ...postValues } = values;

            // Update the post
            const { data: post } = await useUpdate({
                resource: "posts",
                id: postValues.id,
                variables: postValues,
            });

            // Delete existing relationships in the posts_categories table
            await useDeleteMany({
                resource: "posts_categories",
                ids: categories.map((category) => ({
                    post_id: post.id,
                    category_id: category.id,
                })),
            });
// Create new relationships in the posts_categories table
            const postCategories = categories.map((category) => ({
                post_id: post.id,
                category_id: category.id,
            }));

            await useCreateMany({
                resource: "posts_categories",
                variables: postCategories,
            });
        },
    });

    return (
        <form {...formProps}>
            {/* Your form fields here */}
            <button {...saveButtonProps}>Save</button>
        </form>
    );
};

Step 3: Handle Filtering by Categories To filter posts by categories in a many-to-many relationship, you can use the metaData.select option in the useTable hook:

useTable({
    metaData: {
        select: "*, categories(name)",
    },
});

useTable({
    metaData: {
        select: "*, categories(name)",
    },
});

This setup ensures that the data retrieved includes the related categories. Additional Resources - Refine Documentation on useForm (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api) - Supabase Documentation on Querying Foreign Tables (https://supabase.com/docs/reference/javascript/select#query-foreign-tables-through-a-join-table) By following these steps, you can effectively manage and update many-to-many relationships in Supabase using Refine. If you need more detailed examples or run into issues, feel free to check out the Refine Supabase Example (https://github.com/refinedev/refine/tree/master/examples/data-provider-supabase) or reach out to the community for support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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