useCan

Usage

useCan uses the can as the query function for react-query's useQuery. It takes the parameters that can takes. It can also be configured with queryOptions for useQuery. Returns the result of useQuery.

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 checks 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 a great deal. Since refine uses react-query it can be easily done configuring staleTime and cacheTime properties.

// 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
    }
);

API

Properties

Property	Description	Type	Default
resource Required	Resource name for API data interactions	string
action Required	Intenden action on resource	string
params	Parameters associated with the resource	any
queryOptions	react-query's useQuery options	UseQueryOptions< { data: CanReturnType; }, TError>

Type Parameters

Property	Desription
CanReturnType	Result data of the query HttpError

Return values

Description	Type
Result of the react-query's useQuery	QueryObserverResult<{ data: CanReturnType; }>