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 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 TanStack Query it can be easily done configuring 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

Query result of TanStack Query's useQuery.

For example if you want to check if the user can create a post return value will be:

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

            return Promise.resolve({ can: true });
        },
    }}

    // ...
/>;

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

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

API

Properties

Type Parameters

Property	Desription
CanReturnType	Result data of the query HttpError

Return values

Description	Type
Result of the TanStack Query's useQuery	QueryObserverResult<{ data: CanReturnType; }>