Creating multiple entries with AntD's Create and useForm with Supabase

I have 2 tables: brokerage_accounts and brokerage_reports. When creating a brokerage_reports entry, I reference a brokerage_accounts entry. What I'd like to do is have a switch where the user submitting the form can select to create a single entry, or multiple entries for all brokerage_accounts entries. I know it needs to be done with a handleOnFinish function, but am unsure how to tweak my code to do what's needed.
export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};
export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};
K
kapa.ai41d ago
Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, you can modify the handleOnFinish function to handle both single and multiple entries. However, the extracts do not provide specific information on how to create multiple entries for all brokerage_accounts entries in Supabase. The handleOnFinish function can be modified to check if the massReport state is true or false. If it's true, you can loop through all brokerage_accounts and create a brokerage_reports entry for each one. If it's false, you can create a single brokerage_reports entry. However, the extracts do not provide information on how to retrieve all brokerage_accounts entries or how to create multiple brokerage_reports entries in Supabase. You might need to use the useQuery hook to retrieve all brokerage_accounts and the useMutation hook to create brokerage_reports entries, but the exact implementation would depend on your Supabase setup and is not covered in the extracts. Here is a general idea of how you can modify the handleOnFinish function:
const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Retrieve all brokerage_accounts entries
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
} else {
// Create a single brokerage_reports entry
onFinish(values as IBrokerageReport);
}
};
const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Retrieve all brokerage_accounts entries
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
} else {
// Create a single brokerage_reports entry
onFinish(values as IBrokerageReport);
}
};
Please refer to the Refine documentation (https://refine.dev/docs/guides-concepts/forms#basic-usage) and the Supabase documentation (https://supabase.io/docs/guide) for more information on how to use the useQuery and useMutation hooks with Supabase. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai41d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
L
like-gold41d ago
@kapa.ai I was able to get it running as expected with the following code:
// Retrieve all brokerage_accounts entries
const { data: brokerageAccountsData, isError } = useList<IBrokerageAccount, HttpError>({
resource: 'brokerage_accounts',
});
const brokerageAccounts = brokerageAccountsData?.data ?? [];

// Adjust form submission based on massReport
const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
brokerageAccounts.map((account) => {
onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
});
} else {
// Submit form data as is
onFinish(values as IBrokerageReport);
}
};
// Retrieve all brokerage_accounts entries
const { data: brokerageAccountsData, isError } = useList<IBrokerageAccount, HttpError>({
resource: 'brokerage_accounts',
});
const brokerageAccounts = brokerageAccountsData?.data ?? [];

// Adjust form submission based on massReport
const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
brokerageAccounts.map((account) => {
onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
});
} else {
// Submit form data as is
onFinish(values as IBrokerageReport);
}
};
The one catch is that I get multiple success notifications. Can I set it so that I only get 1 that fires, even though I'm looping over onFinish?
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can control the success notifications by using the successNotification prop in the useForm hook. By default, useForm triggers a success notification for each successful mutation. However, you can disable these default notifications and manually trigger a single notification after all mutations are done. First, disable the default success notifications by setting successNotification to false in the useForm hook:
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: false,
// other options...
});
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: false,
// other options...
});
Then, manually trigger a success notification after all mutations are done. You can use the useNotification hook to manually trigger notifications:
import { useNotification } from "@pankod/refine";

// ...

const { notify } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
await Promise.all(brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
}));

// Manually trigger a success notification
notify({
message: `Successfully added new brokerage account reports.`,
description: 'Success',
type: 'success',
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);

// Manually trigger a success notification
notify({
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
});
}
};
import { useNotification } from "@pankod/refine";

// ...

const { notify } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
await Promise.all(brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
}));

// Manually trigger a success notification
notify({
message: `Successfully added new brokerage account reports.`,
description: 'Success',
type: 'success',
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);

// Manually trigger a success notification
notify({
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
});
}
};
In this code, Promise.all is used to wait for all mutations to finish before triggering the success notification. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations. For more information, please refer to the Refine documentation on useForm (https://refine.dev/docs/data/hooks/use-form#successnotification-) and useNotification (https://refine.dev/docs/notification/use-notification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai41d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
L
like-gold41d ago
@kapa.ai Your useNotification link is out of date, here's the current one: https://refine.dev/docs/notification/hooks/use-notification. Also,
const { notify } = useNotification();
const { notify } = useNotification();
no longer exists, it's
const { open, close } = useNotification();
const { open, close } = useNotification();
.
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the outdated information. You're correct, the useNotification hook now returns open and close methods. You can use the open method to manually trigger notifications. Here's how you can modify the code:
import { useNotification } from "@refinedev/core";

// ...

const { open } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
await Promise.all(brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
}));

// Manually trigger a success notification
open({
message: `Successfully added new brokerage account reports.`,
description: 'Success',
type: 'success',
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);

// Manually trigger a success notification
open({
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
});
}
};
import { useNotification } from "@refinedev/core";

// ...

const { open } = useNotification();

// ...

const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
await Promise.all(brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
}));

// Manually trigger a success notification
open({
message: `Successfully added new brokerage account reports.`,
description: 'Success',
type: 'success',
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);

// Manually trigger a success notification
open({
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
});
}
};
In this code, open is used to manually trigger a success notification after all mutations are done. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations. For more information, please refer to the updated Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai41d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
L
like-gold41d ago
@kapa.ai If using the option when massReport is true, the success message doesn't fire. It does if massReport is false however.
const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
await Promise.all(
brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
})
);
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
});
}
};
const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
await Promise.all(
brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
})
);
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
});
}
};
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The issue might be related to the asynchronous nature of the Promise.all function. The open function might be called before all the promises in Promise.all are resolved, which could cause the success message not to fire. To ensure that the open function is called after all the promises are resolved, you can try moving it inside a .then block:
const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
Promise.all(
brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
})
).then(() => {
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added new brokerage account reports.',
});
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
});
}
};
const handleOnFinish = async (values: IBrokerageReport) => {
if (massReport) {
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
Promise.all(
brokerageAccounts.map((account) => {
return onFinish({ ...values, brokerage_account_id: account.id } as IBrokerageReport);
})
).then(() => {
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added new brokerage account reports.',
});
});
} else {
// Submit form data as is
await onFinish(values as IBrokerageReport);
open?.({
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
});
}
};
In this code, the open function is called inside a .then block, which ensures that it's called after all the promises in Promise.all are resolved. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations. For more information, please refer to the Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification) and the MDN documentation on Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai41d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
L
like-gold41d ago
@kapa.ai Even after putting it in a
.then
.then
block, it still doesn't fire as expected.
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still having trouble. It's difficult to diagnose the issue without more context. However, it's possible that the onFinish function might not be returning a promise, which could cause the Promise.all function to resolve immediately. You could try to ensure that onFinish always returns a promise by wrapping it in a Promise.resolve call:
const handleOnFinish = async (values: IBrokerageReport) => {{
if (massReport) {{
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
Promise.all(
brokerageAccounts.map((account) => {{
return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
}})
).then(() => {{
open?.({{
type: 'success',
message: 'Success',
description: 'Successfully added new brokerage account reports.',
}});
}});
}} else {{
// Submit form data as is
await onFinish(values as IBrokerageReport);
open?.({{
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
}});
}}
}};
const handleOnFinish = async (values: IBrokerageReport) => {{
if (massReport) {{
// Loop through all brokerage_accounts and create a brokerage_reports entry for each one
isError && console.log('Error fetching brokerage accounts', isError);
Promise.all(
brokerageAccounts.map((account) => {{
return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
}})
).then(() => {{
open?.({{
type: 'success',
message: 'Success',
description: 'Successfully added new brokerage account reports.',
}});
}});
}} else {{
// Submit form data as is
await onFinish(values as IBrokerageReport);
open?.({{
type: 'success',
message: 'Success',
description: 'Successfully added a new brokerage account report.',
}});
}}
}};
If this doesn't solve the issue, I would recommend checking if there are any errors in the promises returned by onFinish. You can do this by adding a .catch block to the Promise.all call:
Promise.all(
brokerageAccounts.map((account) => {{
return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
}})
).then(() => {{
open?.({{
type: 'success',
message: 'Success',
description: 'Successfully added new brokerage account reports.',
}});
}}).catch((error) => {{
console.error('Error in onFinish promises:', error);
}});
Promise.all(
brokerageAccounts.map((account) => {{
return Promise.resolve(onFinish({{ ...values, brokerage_account_id: account.id }} as IBrokerageReport));
}})
).then(() => {{
open?.({{
type: 'success',
message: 'Success',
description: 'Successfully added new brokerage account reports.',
}});
}}).catch((error) => {{
console.error('Error in onFinish promises:', error);
}});
This will log any errors that occur in the promises returned by onFinish, which might help you diagnose the issue. For more information, please refer to the Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification), the MDN documentation on Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all), and the MDN documentation on Promise.resolve (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai41d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
L
like-gold41d ago
@kapa.ai Another quick question. For my useSelect field, I want to modify the optionLabel. I want it to read "user.full_name- " + "broker_dealer" + "account_number". What's the best way of doing that?
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number',
optionValue: 'id',
});
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number',
optionValue: 'id',
});
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: Sorry @James, I am experiencing especially high traffic right now, please try again. :technologist:
L
like-gold41d ago
@kapa.ai nother quick question. For my useSelect field, I want to modify the optionLabel. I want it to read "user.full_name- " + "broker_dealer" + "account_number". What's the best way of doing that?
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number',
optionValue: 'id',
});
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number',
optionValue: 'id',
});
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: Sorry @James, I am experiencing especially high traffic right now, please try again. :technologist:
L
like-gold41d ago
@kapa.ai For my useSelect field, I want to modify the optionLabel. I want it to read "user.full_name- " + "broker_dealer" + "account_number". What's the best way of doing that?
// Get users from "users" table

// Populate select options with brokerage_accounts
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number', // Should read users.full_name + broker_dealer + account_number
optionValue: 'id',
});
// Get users from "users" table

// Populate select options with brokerage_accounts
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number', // Should read users.full_name + broker_dealer + account_number
optionValue: 'id',
});
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: Sorry @James, I am experiencing especially high traffic right now, please try again. :technologist:
L
like-gold41d ago
@kapa.ai For my useSelect field, I want to modify the optionLabel. I want it to read "user.full_name- " + "broker_dealer" + "account_number". What's the best way of doing that?
// Get users from "users" table

// Populate select options with brokerage_accounts
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number', // Should read users.full_name + broker_dealer + account_number
optionValue: 'id',
});
// Get users from "users" table

// Populate select options with brokerage_accounts
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number', // Should read users.full_name + broker_dealer + account_number
optionValue: 'id',
});
@kapa.ai For my useSelect field, I want to modify the optionLabel. I want it to read "user.full_name- " + "broker_dealer" + "account_number". What's the best way of doing that?
// Get users from "users" table

// Populate select options with brokerage_accounts
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number', // Should read users.full_name + broker_dealer + account_number
optionValue: 'id',
});
// Get users from "users" table

// Populate select options with brokerage_accounts
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_number', // Should read users.full_name + broker_dealer + account_number
optionValue: 'id',
});
K
kapa.ai41d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To modify the optionLabel to include multiple fields, you can use a function instead of a string for optionLabel. This function receives the item as an argument and should return a string that will be used as the label. However, based on the information provided in the extracts, it's not clear how the users table is related to the brokerage_accounts table. If the users table is related to the brokerage_accounts table and each brokerage_account includes a user field with a full_name field, you can do something like this:
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: (item) => `${item.user.full_name} - ${item.broker_dealer} - ${item.account_number}`,
optionValue: 'id',
});
const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: (item) => `${item.user.full_name} - ${item.broker_dealer} - ${item.account_number}`,
optionValue: 'id',
});
In this code, optionLabel is a function that returns a string composed of the full_name field of the user field, the broker_dealer field, and the account_number field of each brokerage_account. Please note that this code assumes that each brokerage_account includes a user field with a full_name field. If this is not the case, you might need to adjust the code to match your data structure. For more information, please refer to the Refine documentation on useSelect (https://refine.dev/docs/data/hooks/use-select#optionlabel-and-optionvalue). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai41d ago
<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
how to reset modal component state on close?this is in my modal component: ``` interface Props { modalProps: ModalProps formProps: FormPropRefine and Server ComponentsHello, is there any info regarding Refine and server components? I found this blog post: https://refrefine build --sourcemaprefine build --sourcemap misses mapping for src files the custom code and only includes nodemodulesREFINE GRAPHQL MOCK DATABASEHello, i have a question, does refine mock database in graphql resetted?why can't use underline as name?why can't use underline as name? { name: 'temp_products', How to use _ as name but use path - instead of _How to use _ as name but use path - instead of _How do I send with admin ID?``` import { AuthBindings } from '@refinedev/core' import nookies from 'nookies' const mockUsers = sidemenu elements namehow can I put a name differente than the resource name in the menu elementsuseList disableIs it possible to disable useList based on prop valueuseUpdateHow to update a resource using on button clickHow to current page to 1 on apply filtersHere is my getList code getList: async ({ resource, pagination, filters, meta }) => { consRefresh the page when closing the modal``` export const PointsModal = ({ type, point_id, member_id }: PointsModalProps) => { const { Button click not workingHello All, I have a form that suddenly doesn' t work I have been upgrading the project to 4 and am pAccessing data using useoneThis is my .tsx file import { Typography, Spin, Alert } from "antd"; import { useOne } from "@refineresolversis there a resolver sample for refine app crm?NavegationHow to put the sider menu on the top navegation using ant designgrapql refine crm appdo i still need to create typedefs and resolvers on my backend?Refine app crmIs there any database schema for the refine app crm? for the typeDefs and resolvers?useExport not downloading, no errorThis is my current code When i press the export button the query sent to the graphql and receive a vSupabase Authentication Trigger & Refine App Integration QuestionHi everyone, I hope you're all doing well. I am encountering a challenge with Supabase Authenticati