useApiUrl breaking code
import { getValueFromEvent, useModalForm, useSelect } from "@refinedev/antd";
import { useApiUrl, useGo } from "@refinedev/core";
import { Form, Modal, Input, Divider, Upload } from "antd";
import { supabaseClient } from "../../utility";
const JobCreate = () => {
const go = useGo();
const apiUrl = useApiUrl();
const goToListPage = () => {
go({
to: { resource: "jobs", action: "list" },
options: {
keepQuery: true,
},
type: "replace",
});
};
const { formProps, modalProps } = useModalForm({
resource: "jobs",
action: "create",
onMutationSuccess: goToListPage,
defaultVisible: true,
redirect: false,
});
return (
<>
<Modal
{...modalProps}
mask={true}
width={560}
destroyOnClose
onCancel={goToListPage}
title={"Create Job"}
>
<Divider />
<Form {...formProps} layout="vertical">
<Form.Item label="Image">
<Form.Item
name="files"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={""}
listType="picture"
maxCount={5}
multiple
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
<Divider />
</Modal>
</>
);
};
export default JobCreate;
why am getting error Not implemented on refine-supabase data provider when using useApiUrl
8 Replies
Hi @daw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error "Not implemented on refine-supabase data provider" occurs because the
getApiUrl
method is not implemented in the Supabase data provider. This is confirmed by the following extract from the knowledge sources:
Source: Blog > Setting Up the Client App > Exploring the App >To resolve this issue, you need to implement the<Refine />
'sdataProvider
Prop Part 5 (https://refine.dev/blog/refine-pixels-2/#refine-s-dataprovider-prop)
getApiUrl
method in your Supabase data provider. Here is an example of how you can modify your data provider to include the getApiUrl
method:
Then, ensure you are using this custom data provider in your Refine
component setup:
By implementing the getApiUrl
method, you will be able to use the useApiUrl
hook without encountering the "Not implemented" error.
For more details, you can refer to the documentation on getApiUrl
(https://refine.dev/docs/data/data-provider/#getapiurl-) and the documentation on useApiUrl
(https://refine.dev/docs/data/hooks/use-api-url/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@243918634374660098> kapa.ai is still learning and improving, please let us know how it did by reacting below
metropolitan-bronzeOP•4mo ago
getApiUrl: () => {
throw Error("Not implemented on refine-supabase data provider.");
},
modify it
getApiUrl: () => {
throw Error("Not implemented on refine-supabase data provider.");
},
@kapa.ai modify it, i found this in the dataprovider
Let me check the knowledge base for you. One moment! :books:
----------------------
To modify the
getApiUrl
method in your Supabase data provider, you can implement it to return the API URL. Here is how you can do it:
1. Modify the getApiUrl
method in your data provider:
2. Ensure you are using this custom data provider in your Refine
component setup:
By implementing the getApiUrl
method, you will be able to use the useApiUrl
hook without encountering the "Not implemented" error.
For more details, you can refer to the documentation on getApiUrl
(https://refine.dev/docs/data/data-provider/#getapiurl-) and the documentation on useApiUrl
(https://refine.dev/docs/data/hooks/use-api-url/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@243918634374660098> kapa.ai is still learning and improving, please let us know how it did by reacting below
metropolitan-bronzeOP•4mo ago
import { DataProvider } from "@refinedev/core";
import { supabaseClient } from "../../utility";
export const dataProvider = (apiUrl: string): DataProvider => ({
getApiUrl: () => apiUrl,
// other methods...
});
where does this code go, which file? @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
To implement the
getApiUrl
method in your Supabase data provider, you need to create or modify a file where your data provider is defined. This file is typically where you configure your data provider for the Refine framework. Here are the steps:
1. Create or Modify the Data Provider File:
Create a new file or modify an existing one, for example, src/dataProvider.ts
:
2. Use the Custom Data Provider in Your App.tsx
:
Ensure you are using this custom data provider in your App.tsx
file:
By following these steps, you will have implemented the getApiUrl
method in your Supabase data provider, and you can use the useApiUrl
hook without encountering the "Not implemented" error.
For more details, you can refer to the documentation on getApiUrl
(https://refine.dev/docs/data/data-provider/#getapiurl-) and the documentation on useApiUrl
(https://refine.dev/docs/data/hooks/use-api-url/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@243918634374660098> kapa.ai is still learning and improving, please let us know how it did by reacting below