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

useCan

useCan uses the Access Control Provider's can function as the query function for TanStack Query's useQuery. It takes the parameters that can takes. It can also be configured with queryOptions for useQuery. Returns the result of useQuery.

Basic Usage​

import { useCan } from "@refinedev/core";

const { data } = useCan({
resource: "resource-you-ask-for-access",
action: "action-type-on-resource",
params: { foo: "optional-params" },
});

Performance​

As the number of points that check for access control in your app increases, the performance of your app may take a hit, especially if its access control involves remote endpoints. Caching the access control checks helps quite a bit, and since refine uses TanStack Query, it can be easily done by confiruging the staleTime and cacheTime properties.

import { useCan } from "@refinedev/core";

// inside your component

const { data } = useCan({
resource: "resource-you-ask-for-access",
action: "action-type-on-resource",
params: { foo: "optional-params" } },
queryOptions: {
staleTime: 5 * 60 * 1000, // 5 minutes
}
});

Properties​

resource
required
​

Passes to Access Control Provider's can function's resource parameter

useCan({
resource: "resource-you-ask-for-access",
});

action
required
​

Passes to Access Control Provider's can function's action parameter

useCan({
action: "resource-you-ask-for-access",
});

params​

Passes to Access Control Provider's can function's params parameter

useCan({
params: { foo: "optional-params" },
});

queryOptions​

Query options for TanStack Query's useQuery.

useCan({
queryOptions: {
staleTime: 5 * 60 * 1000, // 5 minutes
},
});

Return values​

useCan will return the Query result of TanStack Query's useQuery.

For example, if you want to check if the user can create a post based on the return value:

<Refine
accessControlProvider={{
can: async ({ resource, action }) => {
if (resource === "post" && action === "create") {
return {
can: false,
reason: "Unauthorized",
};
}

return { can: true };
},
}}

// ...
/>;

// inside your component
const { data: canCreatePost } = useCan({
action: "create",
resource: "post",
});

console.log(canCreatePost); // { can: false, reason: "Unauthorized" }

API​

Properties​

Type Parameters​

PropertyDesription
CanReturnTypeResult data of the query HttpError

Return values​

DescriptionType
Result of the TanStack Query's useQueryQueryObserverResult<{ data: CanReturnType; }>