Skip to main content
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 Reference​

Return value​

DescriptionType
API URLstring