harsh-harlequin•7mo ago

adding data to multiple resources

@kapa.ai I have table in my supabase "pages" for which I've created a "create" page on refine dashboard where I've some field for page content, and the data from those fields I want it to store in another table i.e. "page_content" so that it will connect wiht pageId foreign key

29 Replies

kapa.ai•7mo ago

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add data to multiple resources in Supabase using Refine, you can follow these steps. This involves creating a custom form submission handler that will save data to both the pages and page_content tables, ensuring that the page_content table references the pageId foreign key from the pages table. Here's a step-by-step guide: 1. Create the create page for the pages table: - You already have a create page for the pages table. Ensure it includes the necessary fields for both pages and page_content. 2. Modify the create page to handle multiple resource submissions: - Update the form submission logic to save data to both the pages and page_content tables. Here is an example of how you can achieve this: ```typescript import { useState } from "react"; import { Create, useForm, useSelect } from "@refinedev/antd"; import { Form, Input, Select, Upload } from "antd"; import { RcFile } from "antd/lib/upload/interface"; import MDEditor from "@uiw/react-md-editor"; import { IPost, ICategory } from "interfaces"; import { supabaseClient, normalizeFile } from "utility"; export const PageCreate: React.FC = () => { const { formProps, saveButtonProps } = useForm<IPost>(); const { selectProps: categorySelectProps } = useSelect<ICategory>({ resource: "categories", }); const handleSubmit = async (values: any) => { try { // Insert into pages table const { data: pageData, error: pageError } = await supabaseClient .from('pages') .insert([{ title: values.title, categoryId: values.categoryId }]) .single(); if (pageError) throw pageError; // Insert into page_content table with pageId as foreign key const { data: contentData, error: contentError } = await supabaseClient .from('page_content') .insert([{ content: values.content, pageId: pageData.id }]); if (contentError) throw contentError; // Handle success (e.g., redirect to list page or show success message) } catch (error) { // Handle error (e.g., show error message) console.error("Error creating page and content:", error); } }; return ( <Create saveButtonProps={saveButtonProps}> <Form {...formProps} layout="vertical" onFinish={handleSubmit}> <Form.Item label="Title" name="title" rules={[{ required: true }]} > <Input /> </Form.Item> <Form.Item label="Category" name="categoryId" rules={[{ required: true }]} > <Select {...categorySelectProps} /> </Form.Item> <Form.Item label="Content" name="content" rules={[{ required: true }]} > <MDEditor data-color-mode="light" /> </Form.Item> <Form.Item label="Images"> <Form.Item name="images" valuePropName="fileList" normalize={normalizeFile} noStyle > <Upload.Dragger name="file" listType="picture" multiple customRequest={async ({ file, onError, onSuccess }) => { try { const rcFile = file as RcFile; await supabaseClient.storage .from(" ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai I'm using mui

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add data to multiple resources in Supabase using Refine with Material UI (MUI), you can follow these steps. This involves creating a custom form submission handler that will save data to both the pages and page_content tables, ensuring that the page_content table references the pageId foreign key from the pages table. Here's a step-by-step guide: 1. Create the create page for the pages table: - Ensure it includes the necessary fields for both pages and page_content. 2. Modify the create page to handle multiple resource submissions: - Update the form submission logic to save data to both the pages and page_content tables. Here is an example of how you can achieve this using Material UI:

import React from "react";
import { useForm } from "@refinedev/antd";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

export const PageCreate: React.FC = () => {
    const { formProps, saveButtonProps } = useForm();

    const handleSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;
// Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" {...formProps} onSubmit={handleSubmit}>
            <TextField
                label="Title"
                name="title"
                required
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                name="categoryId"
                required
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                name="content"
                required
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
                {...saveButtonProps}
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/antd";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

export const PageCreate: React.FC = () => {
    const { formProps, saveButtonProps } = useForm();

    const handleSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;
// Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" {...formProps} onSubmit={handleSubmit}>
            <TextField
                label="Title"
                name="title"
                required
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                name="categoryId"
                required
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                name="content"
                required
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
                {...saveButtonProps}
            >
                Save
            </Button>
        </Box>
    );
};

In this example: - We use Material UI components like TextField and Button to create the form. - The handleSubmit function handles the form submission, inserting data into both the pages and page_content tables in Supabase. - The supabaseClient is used to interact with the Supabase API. This approach ensures that data is correctly saved to both tables, maintaining the relationship between pages and page_content via the pageId foreign key. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai don't import from antd

kapa.ai•7mo ago

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;
// Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;
// Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai Property 'id' does not exist on type 'never'.ts(2339) any

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error Property 'id' does not exist on type 'never'.ts(2339) typically occurs when TypeScript cannot infer the type of a variable or object correctly. This can happen if the type is not explicitly defined or if TypeScript cannot determine the type from the context. To resolve this issue, you need to ensure that TypeScript knows the type of the object you are working with. Here’s how you can address this issue in the context of the example provided earlier: 1. Define the types explicitly: Make sure to define the types for the data you are working with. 2. Use TypeScript generics: When working with functions like insert from Supabase, you can use TypeScript generics to specify the expected type. Here’s an updated example that includes type definitions:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;
// Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;
// Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

In this example: - We define the Page and PageContent interfaces to explicitly specify the types of the data. - We use these types with the Supabase insert method to ensure TypeScript knows what type of data to expect. This should resolve the Property 'id' does not exist on type 'never'.ts(2339) error by providing TypeScript with the necessary type information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai Expected 2 type arguments, but got 1.ts(2558) interface Page

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error Expected 2 type arguments, but got 1.ts(2558) indicates that the insert method from Supabase expects two type arguments, but only one was provided. To resolve this, you need to provide both the type of the data being inserted and the type of the response. Here’s how you can address this issue: 1. Define the types explicitly: Make sure to define the types for the data you are working with. 2. Use TypeScript generics correctly: When working with functions like insert from Supabase, you need to specify both the type of the data being inserted and the type of the response. Here’s an updated example that includes the correct type arguments:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page, Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent, PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page, Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent, PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

In this example: - We define the Page and PageContent interfaces to explicitly specify the types of the data. - We use these types with the Supabase insert method, providing both the type of the data being inserted and the type of the response. This should resolve the Expected 2 type arguments, but got 1.ts(2558) error by providing the correct type arguments to the insert method. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai Type 'Page' does not satisfy the constraint 'string'.ts(2344) interface Page

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To resolve the error Type 'Page' does not satisfy the constraint 'string'.ts(2344), you need to ensure that the type arguments provided to the Supabase insert method are correct. The Supabase client expects the first type argument to be the type of the data being inserted and the second type argument to be the type of the response. Here’s how you can address this issue: 1. Define the types explicitly: Make sure to define the types for the data you are working with. 2. Use TypeScript generics correctly: When working with functions like insert from Supabase, you need to specify both the type of the data being inserted and the type of the response. Here’s an updated example that includes the correct type arguments:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;
// Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;
// Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);

            if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

In this example: - We define the Page and PageContent interfaces to explicitly specify the types of the data. - We use these types with the Supabase insert method, providing the correct type arguments. This should resolve the Type 'Page' does not satisfy the constraint 'string'.ts(2344) error by providing the correct type arguments to the insert method. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai Expected 2 type arguments, but got 1.ts(2558) interface Page

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To resolve the error Expected 2 type arguments, but got 1.ts(2558), you need to ensure that the type arguments provided to the Supabase insert method are correct. The Supabase client expects the first type argument to be the type of the data being inserted and the second type argument to be the type of the response. Here’s how you can address this issue: 1. Define the types explicitly: Make sure to define the types for the data you are working with. 2. Use TypeScript generics correctly: When working with functions like insert from Supabase, you need to specify both the type of the data being inserted and the type of the response. Here’s an updated example that includes the correct type arguments:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

In this example: - We define the Page and PageContent interfaces to explicitly specify the types of the data. - We use these types with the Supabase insert method, providing the correct type arguments. This should resolve the Expected 2 type arguments, but got 1.ts(2558) error by providing the correct type arguments to the insert method. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai not working same error'

kapa.ai•7mo ago

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

In this example: - We define the Page and PageContent interfaces to explicitly specify the types of the data. - We use these types with the Supabase insert method, providing the correct type arguments. This should resolve the Expected 2 type arguments, but got 1.ts(2558) error by providing the correct type arguments to the insert method. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai Could not find the 'content' column of 'pages' in the schema cache There was an error creating page (status code: NaN)

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To resolve the error Could not find the 'content' column of 'pages' in the schema cache, you need to ensure that the content column is correctly referenced in the appropriate table. In your case, it seems like the content should be part of the page_content table, not the pages table. Here’s how you can address this issue: 1. Ensure the content column is in the page_content table: Verify that your Supabase schema has the content column in the page_content table and not in the pages table. 2. Update the form submission logic: Make sure that the content field is being inserted into the page_content table and not the pages table. Here’s an updated example that includes the correct logic:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

In this example: - We ensure that the content field is being inserted into the page_content table. - The pages table only contains the title and categoryId fields. This should resolve the error by correctly referencing the content column in the page_content table. If you continue to encounter issues, double-check your Supabase schema to ensure that the columns are correctly defined. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

harsh-harlequinOP•7mo ago

@kapa.ai not working

kapa.ai•7mo ago

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { TextField, Button, Box } from "@mui/material";
import { supabaseClient } from "utility";

// Define the types for your data
interface Page {
    id: number;
    title: string;
    categoryId: number;
}

interface PageContent {
    id: number;
    content: string;
    pageId: number;
}

export const PageCreate: React.FC = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (values: any) => {
        try {
            // Insert into pages table
            const { data: pageData, error: pageError } = await supabaseClient
                .from<Page>('pages')
                .insert([{ title: values.title, categoryId: values.categoryId }])
                .single();

            if (pageError) throw pageError;

            // Insert into page_content table with pageId as foreign key
            const { data: contentData, error: contentError } = await supabaseClient
                .from<PageContent>('page_content')
                .insert([{ content: values.content, pageId: pageData.id }]);
if (contentError) throw contentError;

            // Handle success (e.g., redirect to list page or show success message)
        } catch (error) {
            // Handle error (e.g., show error message)
            console.error("Error creating page and content:", error);
        }
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <TextField
                label="Title"
                {...register("title", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Category"
                {...register("categoryId", { required: true })}
                fullWidth
                margin="normal"
            />
            <TextField
                label="Content"
                {...register("content", { required: true })}
                fullWidth
                margin="normal"
                multiline
                rows={4}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
            </Button>
        </Box>
    );
};

kapa.ai•7mo ago

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

adding data to multiple resources

Did you find this page helpful?