metropolitan-bronze•4mo ago

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

kapa.ai•4mo ago

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 > <Refine />'s dataProvider Prop Part 5 (https://refine.dev/blog/refine-pixels-2/#refine-s-dataprovider-prop)
getApiUrl: () => {  
  throw Error("Not implemented on refine-supabase data provider.");  
},
getApiUrl: () => {  
  throw Error("Not implemented on refine-supabase data provider.");  
},

To resolve this issue, you need to implement the getApiUrl method in your Supabase data provider. Here is an example of how you can modify your data provider to include the getApiUrl method:

import { DataProvider } from "@refinedev/core";
import { supabaseClient } from "../../utility";

export const dataProvider = (apiUrl: string): DataProvider => ({
  getApiUrl: () => apiUrl,
  // other methods...
});

import { DataProvider } from "@refinedev/core";
import { supabaseClient } from "../../utility";

export const dataProvider = (apiUrl: string): DataProvider => ({
  getApiUrl: () => apiUrl,
  // other methods...
});

Then, ensure you are using this custom data provider in your Refine component setup:

import { Refine } from "@refinedev/core";
import { dataProvider } from "./path-to-your-data-provider";

const App: React.FC = () => {
  return (
    <Refine
      dataProvider={dataProvider("<https://your-supabase-api-url">)}
      // other props...
    >
      {/* ... */}
    </Refine>
  );
};

import { Refine } from "@refinedev/core";
import { dataProvider } from "./path-to-your-data-provider";

const App: React.FC = () => {
  return (
    <Refine
      dataProvider={dataProvider("<https://your-supabase-api-url">)}
      // other props...
    >
      {/* ... */}
    </Refine>
  );
};

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: ----------------------

kapa.ai•4mo ago

<@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

kapa.ai•4mo ago

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:

import { DataProvider } from "@refinedev/core";
import { supabaseClient } from "../../utility";

export const dataProvider = (apiUrl: string): DataProvider => ({
  getApiUrl: () => apiUrl,
  // other methods...
});

import { DataProvider } from "@refinedev/core";
import { supabaseClient } from "../../utility";

export const dataProvider = (apiUrl: string): DataProvider => ({
  getApiUrl: () => apiUrl,
  // other methods...
});

2. Ensure you are using this custom data provider in your Refine component setup:

import { Refine } from "@refinedev/core";
import { dataProvider } from "./path-to-your-data-provider";

const App: React.FC = () => {
  return (
    <Refine
      dataProvider={dataProvider("<https://your-supabase-api-url">)}
      // other props...
    >
      {/* ... */}
    </Refine>
  );
};

import { Refine } from "@refinedev/core";
import { dataProvider } from "./path-to-your-data-provider";

const App: React.FC = () => {
  return (
    <Refine
      dataProvider={dataProvider("<https://your-supabase-api-url">)}
      // other props...
    >
      {/* ... */}
    </Refine>
  );
};

kapa.ai•4mo ago

<@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

kapa.ai•4mo ago

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:

   import { DataProvider } from "@refinedev/core";
   import { supabaseClient } from "../../utility";

   export const dataProvider = (apiUrl: string): DataProvider => ({
     getApiUrl: () => apiUrl,
     // other methods...
   });

   import { DataProvider } from "@refinedev/core";
   import { supabaseClient } from "../../utility";

   export const dataProvider = (apiUrl: string): DataProvider => ({
     getApiUrl: () => apiUrl,
     // other methods...
   });

2. Use the Custom Data Provider in Your App.tsx: Ensure you are using this custom data provider in your App.tsx file:

   import { Refine } from "@refinedev/core";
   import { dataProvider } from "./dataProvider"; // Adjust the path as necessary

   const App: React.FC = () => {
     return (
       <Refine
         dataProvider={dataProvider("<https://your-supabase-api-url">)}
         // other props...
       >
         {/* ... */}
       </Refine>
     );
   };

   export default App;

   import { Refine } from "@refinedev/core";
   import { dataProvider } from "./dataProvider"; // Adjust the path as necessary

   const App: React.FC = () => {
     return (
       <Refine
         dataProvider={dataProvider("<https://your-supabase-api-url">)}
         // other props...
       >
         {/* ... */}
       </Refine>
     );
   };

   export default App;

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: ----------------------

kapa.ai•4mo ago

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