KHi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. 
K----------------------
To store data in multiple tables using refine, you can utilize the and hooks to manage relational data efficiently. Below are the steps and an example to help you understand how to fetch and display data from multiple tables.
import React from "react";
import { useTable, HttpError, useMany } from "@refinedev/core";
export const HomePage: React.FC = () => {
const { tableQueryResult } = useTable<IPost, HttpError>({
resource: "posts",
});
const posts = tableQueryResult?.data?.data ?? [];
const categoryIds = posts.map((item) => item.category.id);
const { data: categoriesData, isLoading } = useMany<ICategory>({
resource: "categories",
ids: categoryIds,
queryOptions: {
enabled: categoryIds.length > 0,
},
});
if (tableQueryResult?.isLoading) {
return <div>Loading...</div>;
}
To store data in multiple tables using refine, you can utilize the and hooks to manage relational data efficiently. Below are the steps and an example to help you understand how to fetch and display data from multiple tables.
Step-by-Step Guide
- Define Your Interfaces: Define the interfaces for your data models. For example, if you have and tables, you can define them as follows:
- Fetch Data Using and Hooks: Use the hook to fetch the main data (e.g., posts) and the hook to fetch related data (e.g., categories).
import React from "react";
import { useTable, HttpError, useMany } from "@refinedev/core";
export const HomePage: React.FC = () => {
const { tableQueryResult } = useTable<IPost, HttpError>({
resource: "posts",
});
const posts = tableQueryResult?.data?.data ?? [];
const categoryIds = posts.map((item) => item.category.id);
const { data: categoriesData, isLoading } = useMany<ICategory>({
resource: "categories",
ids: categoryIds,
queryOptions: {
enabled: categoryIds.length > 0,
},
});
if (tableQueryResult?.isLoading) {
return <div>Loading...</div>;
}
Kreturn (
<div>
<h1>Posts</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Status</th>
<th>Created At</th>
<th>Category</th>
</tr>
</thead>
<tbody>
{posts.map((post) => (
<tr key={post.id}>
<td>{post.id}</td>
<td>{post.title}</td>
<td>{post.status}</td>
<td>{new Date(post.createdAt).toDateString()}</td>
<td>
{isLoading
? "loading..."
: categoriesData?.data.find(
(item) => item.id === post.category.id,
)?.title || "-"}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
useTable` (https://refine.dev/docs/packages/tanstack-table/use-table/#how-can-i-handle-relational-data)
- Fetching Multiple Records from Multiple Tables** (https://github.com/refinedev/refine/discussions/5504)
<div>
<h1>Posts</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Status</th>
<th>Created At</th>
<th>Category</th>
</tr>
</thead>
<tbody>
{posts.map((post) => (
<tr key={post.id}>
<td>{post.id}</td>
<td>{post.title}</td>
<td>{post.status}</td>
<td>{new Date(post.createdAt).toDateString()}</td>
<td>
{isLoading
? "loading..."
: categoriesData?.data.find(
(item) => item.id === post.category.id,
)?.title || "-"}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
useTable` (https://refine.dev/docs/packages/tanstack-table/use-table/#how-can-i-handle-relational-data)
- Fetching Multiple Records from Multiple Tables** (https://github.com/refinedev/refine/discussions/5504)
KBy following these steps, you can efficiently manage and display data from multiple tables in your refine application. If you need more detailed information, please refer to the official documentation (https://refine.dev/docs/guides-concepts/tables#relationships-).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@661831547690680321 kapa.ai is still learning and improving, please let us know how it did by reacting below
P@kapa.ai while create
KLet me check the knowledge base for you. One moment! 
K----------------------
To create and store data in multiple tables using refine, you can follow these steps. This example will demonstrate how to create records in two related tables, such as and .
To create and store data in multiple tables using refine, you can follow these steps. This example will demonstrate how to create records in two related tables, such as and .
Step-by-Step Guide
- Define Your Interfaces: Define the interfaces for your data models. For example, if you have and tables, you can define them as follows:
- Set Up Your Providers: Ensure you have your data providers set up in your component. This example uses Supabase as the data provider.
K- Create Data in Multiple Tables: Use the hook to create records in both tables. Here is an example of how you can create a new order and a new customer.
import React, { useState } from "react";
import { useCreate } from "@refinedev/core";
const CreateOrder: React.FC = () => {
const [customer, setCustomer] = useState({ name: "", email: "" });
const [order, setOrder] = useState({ product: "", quantity: 1 });
const { mutate: createCustomer } = useCreate<ICustomer>();
const { mutate: createOrder } = useCreate<IOrder>();
const handleCreate = () => {
createCustomer(
{
resource: "customers",
values: customer,
},
{
onSuccess: (customerData) => {
createOrder({
resource: "orders",
values: { ...order, customerId: customerData.data.id },
});
},
}
);
};
Kreturn (
<div>
<h1>Create Order</h1>
<div>
<h2>Customer</h2>
<input
type="text"
placeholder="Name"
value={customer.name}
onChange={(e) => setCustomer({ ...customer, name: e.target.value })}
/>
<input
type="email"
placeholder="Email"
value={customer.email}
onChange={(e) => setCustomer({ ...customer, email: e.target.value })}
/>
</div>
<div>
<h2>Order</h2>
<input
type="text"
placeholder="Product"
value={order.product}
onChange={(e) => setOrder({
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
<div>
<h1>Create Order</h1>
<div>
<h2>Customer</h2>
<input
type="text"
placeholder="Name"
value={customer.name}
onChange={(e) => setCustomer({ ...customer, name: e.target.value })}
/>
<input
type="email"
placeholder="Email"
value={customer.email}
onChange={(e) => setCustomer({ ...customer, email: e.target.value })}
/>
</div>
<div>
<h2>Order</h2>
<input
type="text"
placeholder="Product"
value={order.product}
onChange={(e) => setOrder({
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@661831547690680321 kapa.ai is still learning and improving, please let us know how it did by reacting below
PHere i want to store some data in different table like "banner_title" in another table
message.txt11.44KB
P@kapa.ai Here i want to store some data in different table like "banner_title" in another table
message.txt11.44KB
KLet me check the knowledge base for you. One moment!
K----------------------
To store data in different tables, such as storing a in a separate table, you can follow these steps. This example will demonstrate how to create records in two related tables, such as and
To store data in different tables, such as storing a in a separate table, you can follow these steps. This example will demonstrate how to create records in two related tables, such as and
productsStep-by-Step Guide
- Define Your Interfaces: Define the interfaces for your data models. For example, if you have and tables, you can define them as follows:
- Set Up Your Providers: Ensure you have your data providers set up in your component. This example uses Supabase as the data provider.
K- Create Data in Multiple Tables: Use the hook to create records in both tables. Here is an example of how you can create a new product and a new banner.
import React, { useState } from "react";
import { useCreate } from "@refinedev/core";
const CreateProduct: React.FC = () => {
const [banner, setBanner] = useState({ title: "" });
const [product, setProduct] = useState({ name: "", price: 0 });
const { mutate: createBanner } = useCreate<IBanner>();
const { mutate: createProduct } = useCreate<IProduct>();
const handleCreate = () => {
createBanner(
{
resource: "banners",
values: banner,
},
{
onSuccess: (bannerData) => {
createProduct({
resource: "products",
values: { ...product, bannerId: bannerData.data.id },
});
},
}
);
};
Kreturn (
<div>
<h1>Create Product</h1>
<div>
<h2>Banner</h2>
<input
type="text"
placeholder="Title"
value={banner.title}
onChange={(e) => setBanner({ ...banner, title: e.target.value })}
/>
</div>
<div>
<h2>Product</h2>
<input
type="text"
placeholder="Name"
value={product.name}
onChange={(e) => setProduct({ ...product, name: e.target.value })}
/>
<input
type="number"
placeholder="Price"
value={product.price}
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
<div>
<h1>Create Product</h1>
<div>
<h2>Banner</h2>
<input
type="text"
placeholder="Title"
value={banner.title}
onChange={(e) => setBanner({ ...banner, title: e.target.value })}
/>
</div>
<div>
<h2>Product</h2>
<input
type="text"
placeholder="Name"
value={product.name}
onChange={(e) => setProduct({ ...product, name: e.target.value })}
/>
<input
type="number"
placeholder="Price"
value={product.price}
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@661831547690680321 kapa.ai is still learning and improving, please let us know how it did by reacting below