Skip to main content
πŸ‘€ Interested in the latest enterprise backend features of refine? πŸ‘‰ Join now and get early access!
Version: 4.xx.xx
Source Code

useApiUrl

useApiUrl is a React hook that returns the API URL. It uses the getApiUrl method to get the API URL from the dataProvider.

It is useful when you want to use the API URL in your custom hooks.

Usage​

useApiUrl hook will invoke the getApiUrl method from the current resource's dataProvider and return the result. If no resource can be inferred, it will return default data provider's URL.

import { useCustom, useApiUrl } from "@refinedev/core";

interface PostUniqueCheckResponse {
isAvailable: boolean;
}

const apiUrl = useApiUrl();

const { data, isLoading } = useCustom<PostUniqueCheckResponse>({
url: `${apiUrl}/posts-unique-check`,
method: "get",
config: {
query: {
title: "Foo bar",
},
},
});

useApiUrl hook also accepts optional dataProviderName parameter to explicitly get specific dataProvider's URL regardless of current resource's dataProvider.

export const App: React.FC = () => {
return (
<Refine
dataProvider={{
default: dataProvider("https://api.fake-rest.refine.dev/"),
other: dataProvider("https://other-api.fake-rest.refine.dev/"),
}}
>
{/* ... */}
</Refine>
);
};
...
</Refine>


const apiUrl = useApiUrl("other");
// https://other-api.fake-rest.refine.dev/

API​

Return value​

DescriptionType
API URLstring