beenull/OpenPanel
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
OpenPanel/packages/core/CHANGELOG.md
Stefan Pejcic 8595a9f4e5 back
2024-05-08 19:58:53 +02:00

216 KiB
Raw Blame History

@refinedev/core

4.46.2

Patch Changes

  • #5423 75bb61dd3b Thanks @aliemir! - Updated flattenObjectKeys method to support both nested and non-nested variables when propagating server side errors to form fields. Resolves #5461

  • #5401 93e00fd770 Thanks @alicanerdurmaz! - fix: queryKey is not overrideable. To fix this, useQuery overloads refactored with single argument objects.

    - useQuery(queryKey, queryFn, options);
+ useQuery({ queryKey, queryFn, ...options });

    From now on, you can pass queryKey as an object property.

    // all data hooks can be used with this syntax.
useList({
    queryOptions: {
        queryKey: ["my-query-key"],
    },
});

  • #5406 e5888b6b9c Thanks @aliemir! - useMenu hook was using outdated meta and router params due to missing dependency of the callback function. This was causing dynamic menu items to use wrong paths as links. (Resolves #5432)

  • #5452 b621223bfb Thanks @aliemir! - Added the ability to pass meta properties when using useGo's go function with to as a resource object. This allows you to pass additional path parameters to the path defined in the resources array within the <Refine /> component. Resolves #5451

    Assume we have the following resource defined in the <Refine /> component:

    {
    name: "posts",
    list: "/posts",
    edit: "/:foo/posts/:id/edit",
}

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

const MyButton = () => {
    const go = useGo();

    return (
        <Button
            onClick={() => {
                go({
                    to: {
                        resource: "posts",
                        action: "edit",
                        id: "1",
                        meta: {
                            foo: "bar",
                        },
                    },
                    type: "push",
                });
                // generated path will be "/bar/posts/1/edit"
            }}
        >
            Go Posts
        </Button>
    );
};

  • #5381 19ceffbe9f Thanks @aberhamm! - fix: Missing loginLink attribute in AuthPageProps for <AuthPage type="register" />. #5381

4.46.1

Patch Changes

  • #5409 0026fe34d0 Thanks @BatuhanW! - fix: exclude gqlMutation and gqlQuery from building query keys for useUpdate, useUpdateMany, useDelete, and useDeleteMany hooks.

  • #5409 0026fe34d0 Thanks @BatuhanW! - feat: add optional gqlQuery and gqlMutation fields to MetaQuery type to be used in data hooks.

    We plan to utilize these fields on our GraphQL data providers in the future.

    You can build your queries/mutations with graphql-tag package and pass it to the gqlQuery/gqlMutation fields.

    For now, only @refinedev/nestjs-query package supports it.

    import { useList } from "@refinedev/core";
import gql from "graphql-tag";

const PRODUCTS_QUERY = gql`
    query ProductsList(
        $paging: OffsetPaging!
        $filter: BlogPostFilter
        $sorting: [BlogPostSort!]!
    ) {
        products(paging: $paging, filter: $filter, sorting: $sorting) {
            nodes {
                id
                name
            }
            totalCount
        }
    }
`;

const { data } = useList({
    resource: "products",
    meta: { gqlQuery: PRODUCTS_QUERY },
});

4.46.0

Minor Changes

  • #5343 dd8f1270f6 Thanks @alicanerdurmaz! - fix: hideForm should remove all form fields. (submit button, form fields, rememberMe checkbox, forgot password link, etc.) but the /register link should be visible.

  • #5307 f8e407f850 Thanks @jackprogramsjp! - feat: added hideForm props for LoginPage and RegisterPage for AuthPage feature.

    Now with the hideForm props feature, you can be able to hide the forms (like email/password) to only show the OAuth providers. This avoids having to make your own entire AuthPage.

Patch Changes

  • #5323 17aa8c1cd6 Thanks @alicanerdurmaz! - ### Breaking changes

    fix: added required key prop to <Authenticated /> component to resolve issues of rendering of the unwanted content and wrongful redirections. #4782

    Why is it required?

    Due to the nature of React, components are not unmounted and remounted again if props are changed. While this is mostly a good practice for performance, in some cases you'll want your component to re-mount instead of updating; for example, if you don't want to use any of the previous states and effects initiated with the old props.

    The <Authenticated /> component has this kind of scenario when it's used for page-level authentication checks. If the previous check results were used for the rendering of the content (fallback or children) this may lead to unexpected behaviors and flashing of the unwanted content.

    To avoid this, a key property must be set with different values for each use of the <Authenticated /> components. This will make sure that React will unmount and remount the component instead of updating the props.

    import { Refine, Authenticated, AuthPage } from "@refinedev/core";
import {
  CatchAllNavigate,
} from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Refine {/* ... */}>
        <Routes>
          <Route
            element={
              <Authenticated
                key="authenticated-routes"
                fallback={<CatchAllNavigate to="/login" />}
              >
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<h1>Dashboard Page</h1>} />
          </Route>

          <Route
            element={
              <Authenticated key="unauthenticated-routes" fallback={<Outlet />}>
                 <Navigate to="/" replace />
              </Authenticated>
            }
          >
            <Route path="/login" element={<AuthPage type="login" />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

    In the example above, the <Authenticated /> is rendered as the wrapper of both the index route and /login route. Without a key property, <Authenticated /> will not be re-mounted and can result in rendering the content depending on the previous authentication check. This will lead to redirecting to /login when trying to access the index route instead of rendering the content of the index or navigating to index route instead of /login if the user just logged out.

  • #5339 4c49ef0a06 Thanks @alicanerdurmaz! - feat: <WelcomePage /> component redesigned.

  • #5316 3bdb9cb1cb Thanks @ksankeerth! - fix: Return type is not mentioned correctly in useOne, useSelect, useForm, useMany and useShow hooks

    This fix has improved type safety of return type of useOne, useSelect, useForm, useMany and useShow hooks.

4.45.1

Patch Changes

4.45.0

Minor Changes

  • #5259 eac3df87ffb Thanks @aliemir! - Added <AutoSaveIndicator /> component and updated the AutoSaveIndicatorProps type to allow elements to be passed in.

    elements prop is an object with success, error, loading and idle keys. Each key is a React element that will be rendered when the corresponding state is active.

    By default every state will render a span with the translated text of the autoSave.${state} key.

Patch Changes

4.44.12

Patch Changes

4.44.11

Patch Changes

  • #5199 2b8d658a17a Thanks @aliemir! - Exported BaseOption type as successor of the deprecated Option type. BaseOption is { label: any; value: any; }.

    Usage of the deprecated Option type was correctly assuming that the value property of the option is of type string. This assumption was wrong and now the types are changed to reflect the correct values of options with the ability to change it via 4th generic type TOption of useSelect hook.

  • #5199 2b8d658a17a Thanks @aliemir! - Reverted the faulty assumption on option values of useSelect hook to be of type string. Now changed the types and the logic to reflect the correct values of options with the ability to change it via 4th generic type TOption of useSelect hook. (Reverted PR #5160)

    By default TOption will be equal to BaseOption type which is { label: any; value: any; }. If you want to change the type of options, you can do it like this:

    import { HttpError, useSelect } from "@refinedev/core";

type MyData = {
    id: number;
    title: string;
    description: string;
    category: { id: string };
};

type Option = { label: MyData["title"]; value: MyData["id"] }; // equals to { label: string; value: number; }

useSelect<MyData, HttpError, MyData, Option>({
    resource: "posts",
});

  • #5194 9df999ca643 Thanks @fitrahfm! - fix: use relative path instead of path alias to import FlatTreeItem

    Using path alias causes imported types being any during build/compilation process which should be TreeMenuItem[]

  • #5201 760cfbaaa2a Thanks @aliemir! - Exported the flattenObjectKeys and propertyPathToArray helpers from @refinedev/core package.

4.44.10

Patch Changes

  • #5199 2b8d658a17a Thanks @aliemir! - Exported BaseOption type as successor of the deprecated Option type. BaseOption is { label: any; value: any; }.

    Usage of the deprecated Option type was correctly assuming that the value property of the option is of type string. This assumption was wrong and now the types are changed to reflect the correct values of options with the ability to change it via 4th generic type TOption of useSelect hook.

  • #5199 2b8d658a17a Thanks @aliemir! - Reverted the faulty assumption on option values of useSelect hook to be of type string. Now changed the types and the logic to reflect the correct values of options with the ability to change it via 4th generic type TOption of useSelect hook. (Reverted PR #5160)

    By default TOption will be equal to BaseOption type which is { label: any; value: any; }. If you want to change the type of options, you can do it like this:

    import { HttpError, useSelect } from "@refinedev/core";

type MyData = {
    id: number;
    title: string;
    description: string;
    category: { id: string };
};

type Option = { label: MyData["title"]; value: MyData["id"] }; // equals to { label: string; value: number; }

useSelect<MyData, HttpError, MyData, Option>({
    resource: "posts",
});

  • #5194 9df999ca643 Thanks @fitrahfm! - fix: use relative path instead of path alias to import FlatTreeItem

    Using path alias causes imported types being any during build/compilation process which should be TreeMenuItem[]

  • #5201 760cfbaaa2a Thanks @aliemir! - Exported the flattenObjectKeys and propertyPathToArray helpers from @refinedev/core package.

4.44.9

Patch Changes

4.44.8

Patch Changes

4.44.7

Patch Changes

  • #5138 0e22d5804b2 Thanks @aliemir! - Prevent authProvider.getIdentity to be called in useLog if auditLogProvider is not defined.

4.44.6

Patch Changes

  • #5138 0e22d5804b2 Thanks @aliemir! - Prevent authProvider.getIdentity to be called in useLog if auditLogProvider is not defined.

4.44.5

Patch Changes

  • #5087 88d52d639b9 Thanks @alicanerdurmaz! - feat: meta props added liveProvider.subscribe and liveProvider.publish methods. From now on, you can use meta to distinguish between methods by meta.

    meta type:

    import { QueryFunctionContext } from "@tanstack/react-query";

type Fields = Array<string | object | NestedField>;

type VariableOptions =
    | {
          type?: string;
          name?: string;
          value: any;
          list?: boolean;
          required?: boolean;
      }
    | { [k: string]: any };

type Meta = {
    dataProviderName?: string;
    operation?: string;
    fields?: Fields;
    variables?: VariableOptions;
    queryContext?: QueryFunctionContext;
    [k: string]: any;
};

    Usage

    import { LiveProvider, LiveEvent } from "@refinedev/core";

export const liveProvider = (client: any): LiveProvider => {
    return {
        subscribe: ({ channel, types, params, callback, meta }) => {
            console.log({ meta });
        },

        publish: ({ channel, type, payload, date, meta }: LiveEvent) => {
            console.log({ meta });
        },
    };
};

4.44.4

Patch Changes

  • #5087 88d52d639b9 Thanks @alicanerdurmaz! - feat: meta props added liveProvider.subscribe and liveProvider.publish methods. From now on, you can use meta to distinguish between methods by meta.

    meta type:

    import { QueryFunctionContext } from "@tanstack/react-query";

type Fields = Array<string | object | NestedField>;

type VariableOptions =
    | {
          type?: string;
          name?: string;
          value: any;
          list?: boolean;
          required?: boolean;
      }
    | { [k: string]: any };

type Meta = {
    dataProviderName?: string;
    operation?: string;
    fields?: Fields;
    variables?: VariableOptions;
    queryContext?: QueryFunctionContext;
    [k: string]: any;
};

    Usage

    import { LiveProvider, LiveEvent } from "@refinedev/core";

export const liveProvider = (client: any): LiveProvider => {
    return {
        subscribe: ({ channel, types, params, callback, meta }) => {
            console.log({ meta });
        },

        publish: ({ channel, type, payload, date, meta }: LiveEvent) => {
            console.log({ meta });
        },
    };
};

4.44.3

Patch Changes

  • #5050 613af0021f6 Thanks @alicanerdurmaz! - feat: pass dataProviderName to liveProvider.subscribe method. From now on, you can use dataProviderName to distinguish between different data providers in live provider.

    Refer to documentation for more info about multiple data providers ->

    Usage

    import { useForm, useList } from "@refinedev/core";

useList({
    dataProviderName: "first-data-provider",
});

useForm({
    dataProviderName: "second-data-provider",
});

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

export const liveProvider = (client: any): LiveProvider => {
    return {
        subscribe: ({
            channel,
            types,
            params,
            callback,
            dataProviderName,
        }) => {
            console.log({ dataProviderName }); //  "second-data-provider"
        },
    };
};

  • #5053 857d4020a30 Thanks @alicanerdurmaz! - feat: The parameter types of data provider methods have been exported. From now on, you can use the parameter types of Data Provider methods.

    import type {
    DataProvider,
    GetListResponse
    // new exported types
    GetListParams,
    GetManyParams,
    GetOneParams,
    CreateParams,
    CreateManyParams,
    UpdateParams,
    UpdateManyParams,
    DeleteOneParams,
    DeleteManyParams,
    CustomParams,
} from "@refinedev/core";

const myDataProvider: DataProvider = {
    getList: async (params: GetListParams): Promise<GetListResponse<any>> => {
        return { data: [], total: 0 };
    },
};

4.44.2

Patch Changes

  • #5050 613af0021f6 Thanks @alicanerdurmaz! - feat: pass dataProviderName to liveProvider.subscribe method. From now on, you can use dataProviderName to distinguish between different data providers in live provider.

    Refer to documentation for more info about multiple data providers ->

    Usage

    import { useForm, useList } from "@refinedev/core";

useList({
    dataProviderName: "first-data-provider",
});

useForm({
    dataProviderName: "second-data-provider",
});

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

export const liveProvider = (client: any): LiveProvider => {
    return {
        subscribe: ({
            channel,
            types,
            params,
            callback,
            dataProviderName,
        }) => {
            console.log({ dataProviderName }); //  "second-data-provider"
        },
    };
};

  • #5053 857d4020a30 Thanks @alicanerdurmaz! - feat: The parameter types of data provider methods have been exported. From now on, you can use the parameter types of Data Provider methods.

    import type {
    DataProvider,
    GetListResponse
    // new exported types
    GetListParams,
    GetManyParams,
    GetOneParams,
    CreateParams,
    CreateManyParams,
    UpdateParams,
    UpdateManyParams,
    DeleteOneParams,
    DeleteManyParams,
    CustomParams,
} from "@refinedev/core";

const myDataProvider: DataProvider = {
    getList: async (params: GetListParams): Promise<GetListResponse<any>> => {
        return { data: [], total: 0 };
    },
};

4.44.1

Patch Changes

  • #5050 613af0021f6 Thanks @alicanerdurmaz! - feat: pass dataProviderName to liveProvider.subscribe method. From now on, you can use dataProviderName to distinguish between different data providers in live provider.

    Refer to documentation for more info about multiple data providers ->

    Usage

    import { useForm, useList } from "@refinedev/core";

useList({
    dataProviderName: "first-data-provider",
});

useForm({
    dataProviderName: "second-data-provider",
});

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

export const liveProvider = (client: any): LiveProvider => {
    return {
        subscribe: ({
            channel,
            types,
            params,
            callback,
            dataProviderName,
        }) => {
            console.log({ dataProviderName }); //  "second-data-provider"
        },
    };
};

  • #5053 857d4020a30 Thanks @alicanerdurmaz! - feat: The parameter types of data provider methods have been exported. From now on, you can use the parameter types of Data Provider methods.

    import type {
    DataProvider,
    GetListResponse
    // new exported types
    GetListParams,
    GetManyParams,
    GetOneParams,
    CreateParams,
    CreateManyParams,
    UpdateParams,
    UpdateManyParams,
    DeleteOneParams,
    DeleteManyParams,
    CustomParams,
} from "@refinedev/core";

const myDataProvider: DataProvider = {
    getList: async (params: GetListParams): Promise<GetListResponse<any>> => {
        return { data: [], total: 0 };
    },
};

4.44.0

Minor Changes

  • #5034 85bcff15d1e Thanks @alicanerdurmaz! - feat: The go function returned by useGo now accepts a resource object as the to parameter. From now now, you can provide either a string or a resource object to the go function. When a resource object is passed, it will be transformed into the path defined within the resources array of the <Refine /> component.

    to accepts an object with the following shape to navigate to a resource:

    Name Type Description
    resource string resource name or identifier.
    id [BaseKey][basekey] required when action is "edit", "show", or "clone".
    action "list" | "create" | "edit" | "show" | "clone" action name. 
    import { useGo } from "@refinedev/core";

const MyComponent = () => {
    const go = useGo();

    return (
        <Button
            onClick={() => {
                go({
                    to:  {
                        resource: "posts", // resource name or identifier
                        action: "edit",
                        id: "1",
                    }
                    query: {
                         foo: "bar",
                    },
                    type: "push",
                });
            }}
        >
            Go Posts With Default Filters
        </Button>
    );
};

4.43.0

Minor Changes

  • #5034 85bcff15d1e Thanks @alicanerdurmaz! - feat: The go function returned by useGo now accepts a resource object as the to parameter. From now now, you can provide either a string or a resource object to the go function. When a resource object is passed, it will be transformed into the path defined within the resources array of the <Refine /> component.

    to accepts an object with the following shape to navigate to a resource:

    Name Type Description
    resource string resource name or identifier.
    id [BaseKey][basekey] required when action is "edit", "show", or "clone".
    action "list" | "create" | "edit" | "show" | "clone" action name. 
    import { useGo } from "@refinedev/core";

const MyComponent = () => {
    const go = useGo();

    return (
        <Button
            onClick={() => {
                go({
                    to:  {
                        resource: "posts", // resource name or identifier
                        action: "edit",
                        id: "1",
                    }
                    query: {
                         foo: "bar",
                    },
                    type: "push",
                });
            }}
        >
            Go Posts With Default Filters
        </Button>
    );
};

4.42.4

Patch Changes

  • Updated dependencies [80513a4e42f]:
    • @refinedev/devtools-internal@1.1.4

4.42.3

Patch Changes

  • Updated dependencies [80513a4e42f]:
    • @refinedev/devtools-internal@1.1.3

4.42.2

Patch Changes

  • #5008 c8499114e55 Thanks @aliemir! - Fixing the version of @refinedev/devtools-internal dependency to avoid breaking projects in mismatching releases.

  • Updated dependencies [c8499114e55]:

    • @refinedev/devtools-internal@1.1.2

4.42.1

Patch Changes

  • #5008 c8499114e55 Thanks @aliemir! - Fixing the version of @refinedev/devtools-internal dependency to avoid breaking projects in mismatching releases.

  • Updated dependencies [c8499114e55]:

    • @refinedev/devtools-internal@1.1.1

4.42.0

Minor Changes

  • #4960 d8e464fa2c4 Thanks @aliemir! - Added devtools internals and integrated with the core hooks. Now users will be able to track the queries and mutation made by refine through refine devtools.

Patch Changes

  • Updated dependencies [d8e464fa2c4]:
    • @refinedev/devtools-internal@1.1.0

4.41.0

Minor Changes

  • #4960 d8e464fa2c4 Thanks @aliemir! - Added devtools internals and integrated with the core hooks. Now users will be able to track the queries and mutation made by refine through refine devtools.

Patch Changes

  • Updated dependencies [d8e464fa2c4]:
    • @refinedev/devtools-internal@1.0.0

4.40.0

Minor Changes

  • #4914 91a4d0da9f1 Thanks @yildirayunlu! - feat: add optimisticUpdateMap prop to the useUpdate and useUpdateMany hooks

    list, many and detail are the keys of the optimisticUpdateMap object. To automatically update the cache, you should pass true. If you don't want to update the cache, you should pass false.

    If you wish to customize the cache update, you have the option to provide functions for the list, many, and detail keys. These functions will be invoked with the previous data, values, and id parameters. Your responsibility is to return the updated data within these functions.

    const { mutate } = useUpdateMany();

mutate({
    //...
    mutationMode: "optimistic",
    optimisticUpdateMap: {
        list: true,
        many: true,
        detail: (previous, values, id) => {
            if (!previous) {
                return null;
            }

            const data = {
                id,
                ...previous.data,
                ...values,
                foo: "bar",
            };

            return {
                ...previous,
                data,
            };
        },
    },
});

    feat: add optimisticUpdateMap prop to the useForm hook

    const { formProps, saveButtonProps } = useForm({
    mutationMode: "optimistic",
    optimisticUpdateMap: {
        list: true,
        many: true,
        detail: (previous, values, id) => {
            if (!previous) {
                return null;
            }

            const data = {
                id,
                ...previous.data,
                ...values,
                foo: "bar",
            };

            return {
                ...previous,
                data,
            };
        },
    },
});

Patch Changes

4.39.0

Minor Changes

  • #4914 91a4d0da9f1 Thanks @yildirayunlu! - feat: add optimisticUpdateMap prop to the useUpdate and useUpdateMany hooks

    list, many and detail are the keys of the optimisticUpdateMap object. To automatically update the cache, you should pass true. If you don't want to update the cache, you should pass false.

    If you wish to customize the cache update, you have the option to provide functions for the list, many, and detail keys. These functions will be invoked with the previous data, values, and id parameters. Your responsibility is to return the updated data within these functions.

    const { mutate } = useUpdateMany();

mutate({
    //...
    mutationMode: "optimistic",
    optimisticUpdateMap: {
        list: true,
        many: true,
        detail: (previous, values, id) => {
            if (!previous) {
                return null;
            }

            const data = {
                id,
                ...previous.data,
                ...values,
                foo: "bar",
            };

            return {
                ...previous,
                data,
            };
        },
    },
});

    feat: add optimisticUpdateMap prop to the useForm hook

    const { formProps, saveButtonProps } = useForm({
    mutationMode: "optimistic",
    optimisticUpdateMap: {
        list: true,
        many: true,
        detail: (previous, values, id) => {
            if (!previous) {
                return null;
            }

            const data = {
                id,
                ...previous.data,
                ...values,
                foo: "bar",
            };

            return {
                ...previous,
                data,
            };
        },
    },
});

Patch Changes

4.38.4

Patch Changes

  • #4951 04837c62077 Thanks @aliemir! - - Update build configuration for esbuild to use the shared plugins.
    • Fix the lodash replacement plugin to skip redundant files.

4.38.3

Patch Changes

  • #4951 04837c62077 Thanks @aliemir! - - Update build configuration for esbuild to use the shared plugins.
    • Fix the lodash replacement plugin to skip redundant files.

4.38.2

Patch Changes

4.38.1

Patch Changes

4.38.0

Minor Changes

  • #4906 58d3d605510 Thanks @alicanerdurmaz! - feat: added onUnauthorized callback to <CanAccess /> component. This callback to be called when useCan returns false.

    <CanAccess
    onUnauthorized={({ resource, reason, action, params }) =>
        console.log(
            `You cannot access ${resource}-${params.id} resource with ${action} action because ${reason}`,
        )
    }
>
    <YourComponent />
</CanAccess>

Patch Changes

4.37.0

Minor Changes

  • #4906 58d3d605510 Thanks @alicanerdurmaz! - feat: added onUnauthorized callback to <CanAccess /> component. This callback to be called when useCan returns false.

    <CanAccess
    onUnauthorized={({ resource, reason, action, params }) =>
        console.log(
            `You cannot access ${resource}-${params.id} resource with ${action} action because ${reason}`,
        )
    }
>
    <YourComponent />
</CanAccess>

Patch Changes

4.36.2

Patch Changes

  • #4896 daabcd666be Thanks @aliemir! - useInvalidate now returns a promise that resolves when the invalidation is completed.

  • #4896 daabcd666be Thanks @aliemir! - Fine-tuning the invalidation process by setting up additional filters and options for the invalidation.

    Now after a successful mutation, refine will invalidate all the queries in the scope but trigger a refetch only for the active queries. If there are any ongoing queries, they will be kept as they are.

    After receiving a realtime subscription event, refine will invalidate and refetch only the active queries.

4.36.1

Patch Changes

  • #4896 daabcd666be Thanks @aliemir! - useInvalidate now returns a promise that resolves when the invalidation is completed.

  • #4896 daabcd666be Thanks @aliemir! - Fine-tuning the invalidation process by setting up additional filters and options for the invalidation.

    Now after a successful mutation, refine will invalidate all the queries in the scope but trigger a refetch only for the active queries. If there are any ongoing queries, they will be kept as they are.

    After receiving a realtime subscription event, refine will invalidate and refetch only the active queries.

4.36.0

Minor Changes

  • #4865 946e13408e7 Thanks @aliemir! - Updated query keys to be more consistent and structured.

    Added mutation keys to the useMutation calls with the same structure as the query keys.

    Added options.useNewQueryKeys option to the <Refine> component for opting into the new query keys.

    Check out the documentation for more information.

4.35.0

Minor Changes

  • #4865 946e13408e7 Thanks @aliemir! - Updated query keys to be more consistent and structured.

    Added mutation keys to the useMutation calls with the same structure as the query keys.

    Added options.useNewQueryKeys option to the <Refine> component for opting into the new query keys.

    Check out the documentation for more information.

4.34.0

Minor Changes

  • #4775 3052fb22449 Thanks @alicanerdurmaz! - feat: queryKeys and pickDataProvider functions are exported.

    pickDataProvider: returns the data provider name based on the provided name or fallbacks to resource definition, or default.

    queryKeys: returns the query keys used by the data hooks based on the resource definition

4.33.0

Minor Changes

  • #4775 3052fb22449 Thanks @alicanerdurmaz! - feat: queryKeys and pickDataProvider functions are exported.

    pickDataProvider: returns the data provider name based on the provided name or fallbacks to resource definition, or default.

    queryKeys: returns the query keys used by the data hooks based on the resource definition

4.32.2

Patch Changes

4.32.1

Patch Changes

4.32.0

Minor Changes

  • #4741 026ccf34356 Thanks @aliemir! - Added sideEffects: false to package.json to help bundlers tree-shake unused code.

4.31.0

Minor Changes

  • #4741 026ccf34356 Thanks @aliemir! - Added sideEffects: false to package.json to help bundlers tree-shake unused code.

4.30.0

Minor Changes

  • #4742 61950c8fe18 Thanks @aliemir! - Removed @tanstack/react-query-devtools package and its usage from refine's core. This means that you will no longer see the dev tools icon in the bottom right corner of your app by default. If you want to use the dev tools, you can install the package (@tanstack/react-query-devtools) and use it in your app.

    options.reactQuery.devtoolConfig property has been removed from the <Refine> components props. This option will no longer be functional and will be removed in the next major release. If you have any configuration for the dev tools, you can pass it to the ReactQueryDevtools component directly.

Patch Changes

  • #4740 41018fde9ff Thanks @aliemir! - Use fetch for telemetry calls as a fallback for Image when it's not available. This fixes an issue where telemetry calls would fail in some environments.

4.29.0

Minor Changes

  • #4742 61950c8fe18 Thanks @aliemir! - Removed @tanstack/react-query-devtools package and its usage from refine's core. This means that you will no longer see the dev tools icon in the bottom right corner of your app by default. If you want to use the dev tools, you can install the package (@tanstack/react-query-devtools) and use it in your app.

    options.reactQuery.devtoolConfig property has been removed from the <Refine> components props. This option will no longer be functional and will be removed in the next major release. If you have any configuration for the dev tools, you can pass it to the ReactQueryDevtools component directly.

Patch Changes

  • #4740 41018fde9ff Thanks @aliemir! - Use fetch for telemetry calls as a fallback for Image when it's not available. This fixes an issue where telemetry calls would fail in some environments.

4.28.2

Patch Changes

  • #4696 35a2c695a74 Thanks @BatuhanW! - feat: add optional projectId field to component options prop. Project ID will be sent with telemetry data if it exists.

4.28.1

Patch Changes

  • #4696 35a2c695a74 Thanks @BatuhanW! - feat: add optional projectId field to component options prop. Project ID will be sent with telemetry data if it exists.

4.28.0

Minor Changes

  • #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added errros field to HttpError type. From now on, you can pass errors field to HttpError. This field will be used to update the useForm's error state.

    export interface ValidationErrors {
    [field: string]:
        | string
        | string[]
        | boolean
        | { key: string; message: string };
}

export interface HttpError extends Record<string, any> {
    message: string;
    statusCode: number;
    errors?: ValidationErrors;
}

    Usage example:

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

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={{
                // ...
                update: async () => {
                    // assume that the server returns the following error
                    const error: HttpError = {
                        message:
                            "An error occurred while updating the record.",
                        statusCode: 400,
                        //This field will be used to update the `useForm`'s error state
                        errors: {
                            title: [
                                "Title is required.",
                                "Title should have at least 5 characters.",
                            ],
                            "category.id": ["Category is required."],
                            status: true,
                            content: {
                                key: "form.error.content",
                                message: "Content is required.",
                            },
                        },
                    };

                    return Promise.reject(error);
                },
            }}
        >
            {/* ... */}
        </Refine>
    );
};

    Refer to the server-side form validation documentation for more information. →

  • #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added disableServerSideValidation to the refine options for globally disabling server-side validation.

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

<Refine
    options={{
        disableServerSideValidation: true,
    }}
>
    // ...
</Refine>;

  • #4591 f8891ead2bd Thanks @yildirayunlu! - feat: autoSave feature for useForm hook now accept autoSave object. enabled is a boolean value and debounce is a number value in milliseconds. debounce is optional and default value is 1000. autoSaveProps is an object that contains data, error and status values. data is the saved data, error is the error object and status is the status of the request. status can be loading, error, idle and success.

    const { autoSaveProps } = useForm({
    autoSave: {
        enabled: true,
        debounce: 2000, // not required, default is 1000
    },
});

Patch Changes

  • #4659 3af99896101 Thanks @salihozdemir! - chore: fix tsdoc description of onCancel property on following hooks:

    • useUpdate
    • useUpdateMany
    • useDelete
    • useDeleteMany

  • #4665 3442f4bd00a Thanks @yildirayunlu! - feat: add false return type on SuccessErrorNotification

    This issue has been fixed in this PR, where the successNotification and errorNotification methods can now return false when a callback function is given. This allows the conditional notification to be displayed.

    const { mutate } = useCreate<IPost>({});

mutate({
    resource: "posts",
    values: {
        title: "Hello World",
        status: "published",
    },
    successNotification: (data) => {
        if (data?.data.status === "published") {
            return {
                type: "success",
                message: "Post published",
            };
        }

        return false;
    },
});

4.27.0

Minor Changes

  • #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added errros field to HttpError type. From now on, you can pass errors field to HttpError. This field will be used to update the useForm's error state.

    export interface ValidationErrors {
    [field: string]:
        | string
        | string[]
        | boolean
        | { key: string; message: string };
}

export interface HttpError extends Record<string, any> {
    message: string;
    statusCode: number;
    errors?: ValidationErrors;
}

    Usage example:

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

const App = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={{
                // ...
                update: async () => {
                    // assume that the server returns the following error
                    const error: HttpError = {
                        message:
                            "An error occurred while updating the record.",
                        statusCode: 400,
                        //This field will be used to update the `useForm`'s error state
                        errors: {
                            title: [
                                "Title is required.",
                                "Title should have at least 5 characters.",
                            ],
                            "category.id": ["Category is required."],
                            status: true,
                            content: {
                                key: "form.error.content",
                                message: "Content is required.",
                            },
                        },
                    };

                    return Promise.reject(error);
                },
            }}
        >
            {/* ... */}
        </Refine>
    );
};

    Refer to the server-side form validation documentation for more information. →

  • #4652 96af6d25b7a Thanks @alicanerdurmaz! - feat: added disableServerSideValidation to the refine options for globally disabling server-side validation.

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

<Refine
    options={{
        disableServerSideValidation: true,
    }}
>
    // ...
</Refine>;

  • #4591 f8891ead2bd Thanks @yildirayunlu! - feat: autoSave feature for useForm hook now accept autoSave object. enabled is a boolean value and debounce is a number value in milliseconds. debounce is optional and default value is 1000. autoSaveProps is an object that contains data, error and status values. data is the saved data, error is the error object and status is the status of the request. status can be loading, error, idle and success.

    const { autoSaveProps } = useForm({
    autoSave: {
        enabled: true,
        debounce: 2000, // not required, default is 1000
    },
});

Patch Changes

  • #4659 3af99896101 Thanks @salihozdemir! - chore: fix tsdoc description of onCancel property on following hooks:

    • useUpdate
    • useUpdateMany
    • useDelete
    • useDeleteMany

  • #4665 3442f4bd00a Thanks @yildirayunlu! - feat: add false return type on SuccessErrorNotification

    This issue has been fixed in this PR, where the successNotification and errorNotification methods can now return false when a callback function is given. This allows the conditional notification to be displayed.

    const { mutate } = useCreate<IPost>({});

mutate({
    resource: "posts",
    values: {
        title: "Hello World",
        status: "published",
    },
    successNotification: (data) => {
        if (data?.data.status === "published") {
            return {
                type: "success",
                message: "Post published",
            };
        }

        return false;
    },
});

4.26.4

Patch Changes

  • #4626 03597ed8a9a Thanks @aliemir! - Added resource sanitization to the useCanWithoutCache hook to avoid cyclic value errors.

4.26.3

Patch Changes

  • #4626 03597ed8a9a Thanks @aliemir! - Added resource sanitization to the useCanWithoutCache hook to avoid cyclic value errors.

4.26.2

Patch Changes

4.26.1

Patch Changes

4.26.0

Minor Changes

  • #4568 8c2b3be35b0 Thanks @salihozdemir! - feat: add the textTransformers option to <Refine/> component

    The textTransformers option in refine is used to transform the resource name displayed on the user interface (UI). By default, if you define a resource named posts, refine will display it as Posts. Similarly, when you delete a record, notification messages will be shown as Post deleted successfully..

    You have the flexibility to customize these messages by using the textTransformers option. For instance, if you wish to disable any transformation, you can set the textTransformers option as shown in the example below:

    const App: React.FC = () => (
    <Refine
        // ...
        options={{
            textTransformers: {
                humanize: (text) => text,
                plural: (text) => text,
                singular: (text) => text,
            },
        }}
    />
);

Patch Changes

  • #4583 c3c0deed564 Thanks @aliemir! - Added the missing resource property in params of the useCan call, which was leading to missing resource details in the access control checks in the can function.

    The provided resource item is sanitized to remove non-serializable properties such as icon etc. If you need such items, you should try to access your resource item directly from your defitinions.

  • #4599 5bb6f47a4d4 Thanks @aliemir! - Update default document title generation to use the fallback title when i18n's translate function returns the key value.

4.25.1

Patch Changes

  • #4599 5bb6f47a4d4 Thanks @aliemir! - Update default document title generation to use the fallback title when i18n's translate function returns the key value.

4.25.0

Minor Changes

  • #4568 8c2b3be35b0 Thanks @salihozdemir! - feat: add the textTransformers option to <Refine/> component

    The textTransformers option in refine is used to transform the resource name displayed on the user interface (UI). By default, if you define a resource named posts, refine will display it as Posts. Similarly, when you delete a record, notification messages will be shown as Post deleted successfully..

    You have the flexibility to customize these messages by using the textTransformers option. For instance, if you wish to disable any transformation, you can set the textTransformers option as shown in the example below:

    const App: React.FC = () => (
    <Refine
        // ...
        options={{
            textTransformers: {
                humanize: (text) => text,
                plural: (text) => text,
                singular: (text) => text,
            },
        }}
    />
);

Patch Changes

  • #4583 c3c0deed564 Thanks @aliemir! - Added the missing resource property in params of the useCan call, which was leading to missing resource details in the access control checks in the can function.

    The provided resource item is sanitized to remove non-serializable properties such as icon etc. If you need such items, you should try to access your resource item directly from your defitinions.

4.24.0

Minor Changes

  • #4523 18d446b1069 Thanks @yildirayunlu! - feat: add useLoadingOvertime hook and implement primitive hooks

    If you need to do something when the loading time exceeds the specified time, refine provides the useLoadingOvertime hook. It returns the elapsed time in milliseconds.

    const { elapsedTime } = useLoadingOvertime({
    isLoading,
    interval: 1000,
    onInterval(elapsedInterval) {
        console.log("loading overtime", elapsedInterval);
    },
});

console.log(elapsedTime); // 1000, 2000, 3000, ...

    This hook implements the primitive data hooks:

  • #4527 ceadcd29fc9 Thanks @salihozdemir! - fix: support multiple resource usage with the same name via the identifier

    Previously, data hooks only worked with resource name. So if you had multiple resource usage with the same name, it would cause issues.

    Now the following hooks and its derivatives support identifier to distinguish between the resources:

    • useList
    • useInfiniteList
    • useOne
    • useMany
    • useCreate
    • useCreateMany
    • useUpdate
    • useUpdateMany
    • useDelete
    • useDeleteMany

    fix: generate correct queryKey's for queries with identifier

    Previously, the queryKey was generated using name. This caused issues when you had multiple resource usage with the same name. Now the queryKey's are generated using identifier if it's present.

  • #4523 18d446b1069 Thanks @yildirayunlu! - feat: add useLoadingOvertime hook

    if you need to do something when the loading time exceeds the specified time, refine provides the useLoadingOvertime hook. It returns the elapsed time in milliseconds.

    const { elapsedTime } = useLoadingOvertime({
    isLoading,
    interval: 1000,
    onInterval(elapsedInterval) {
        console.log("loading overtime", elapsedInterval);
    },
});

    interval and onInterval are optional. It can be controlled globally from <Refine /> options.

    <Refine
    //...
    options={{
        //...
        overtime: {
            interval: 2000, // default 1000
            onInterval(elapsedInterval) {
                console.log(
                    "loading overtime",
                    elapsedInterval,
                );
            },
        },
    }}
>

4.23.0

Minor Changes

  • #4523 18d446b1069 Thanks @yildirayunlu! - feat: add useLoadingOvertime hook and implement primitive hooks

    If you need to do something when the loading time exceeds the specified time, refine provides the useLoadingOvertime hook. It returns the elapsed time in milliseconds.

    const { elapsedTime } = useLoadingOvertime({
    isLoading,
    interval: 1000,
    onInterval(elapsedInterval) {
        console.log("loading overtime", elapsedInterval);
    },
});

console.log(elapsedTime); // 1000, 2000, 3000, ...

    This hook implements the primitive data hooks:

  • #4527 ceadcd29fc9 Thanks @salihozdemir! - fix: support multiple resource usage with the same name via the identifier

    Previously, data hooks only worked with resource name. So if you had multiple resource usage with the same name, it would cause issues.

    Now the following hooks and its derivatives support identifier to distinguish between the resources:

    • useList
    • useInfiniteList
    • useOne
    • useMany
    • useCreate
    • useCreateMany
    • useUpdate
    • useUpdateMany
    • useDelete
    • useDeleteMany

    fix: generate correct queryKey's for queries with identifier

    Previously, the queryKey was generated using name. This caused issues when you had multiple resource usage with the same name. Now the queryKey's are generated using identifier if it's present.

  • #4523 18d446b1069 Thanks @yildirayunlu! - feat: add useLoadingOvertime hook

    if you need to do something when the loading time exceeds the specified time, refine provides the useLoadingOvertime hook. It returns the elapsed time in milliseconds.

    const { elapsedTime } = useLoadingOvertime({
    isLoading,
    interval: 1000,
    onInterval(elapsedInterval) {
        console.log("loading overtime", elapsedInterval);
    },
});

    interval and onInterval are optional. It can be controlled globally from <Refine /> options.

    <Refine
    //...
    options={{
        //...
        overtime: {
            interval: 2000, // default 1000
            onInterval(elapsedInterval) {
                console.log(
                    "loading overtime",
                    elapsedInterval,
                );
            },
        },
    }}
>

4.22.0

Minor Changes

  • #4449 cc84d61bc5c Thanks @BatuhanW! - feat: allow access control provider to be configured globally.

    Now accessControlProvider accepts options.buttons parameter to globally configure UI buttons' behaviour.

    These configuration will be used as a fallback, if no configuration on button prop level is found.

    Default values:

    options.buttons.enableAccessControl => true options.buttons.hideIfUnauthorized => false

    const accessControlProvider: IAccessControlContext = {
    can: async (params: CanParams): Promise<CanReturnType> => {
        return { can: true };
    },
    options: {
        buttons: {
            enableAccessControl: true,
            hideIfUnauthorized: false,
        },
    },
};

Patch Changes

  • #4521 a3c8d4f84c7 Thanks @alicanerdurmaz! - fixed: useExport's resource props is not working. With this fix, useExport will now work with resource props.

    useExport({
    resource: "users",
});

4.21.0

Minor Changes

  • #4449 cc84d61bc5c Thanks @BatuhanW! - feat: allow access control provider to be configured globally.

    Now accessControlProvider accepts options.buttons parameter to globally configure UI buttons' behaviour.

    These configuration will be used as a fallback, if no configuration on button prop level is found.

    Default values:

    options.buttons.enableAccessControl => true options.buttons.hideIfUnauthorized => false

    const accessControlProvider: IAccessControlContext = {
    can: async (params: CanParams): Promise<CanReturnType> => {
        return { can: true };
    },
    options: {
        buttons: {
            enableAccessControl: true,
            hideIfUnauthorized: false,
        },
    },
};

Patch Changes

  • #4521 a3c8d4f84c7 Thanks @alicanerdurmaz! - fixed: useExport's resource props is not working. With this fix, useExport will now work with resource props.

    useExport({
    resource: "users",
});

4.20.0

Minor Changes

  • #4448 c82006f712a Thanks @BatuhanW! - feat: useApiUrl hook tries to infer data provider from current resource. If current resource has a different data provider than the default one, it will be inferred without needing to explicitly pass data provider name.

4.19.0

Minor Changes

  • #4448 c82006f712a Thanks @BatuhanW! - feat: useApiUrl hook tries to infer data provider from current resource. If current resource has a different data provider than the default one, it will be inferred without needing to explicitly pass data provider name.

4.18.2

Patch Changes

  • #4446 5936d9cd4d4 Thanks @salihozdemir! - refactor: increase accessibility of auth page components

    add htmlFor to label elements to associate them with their inputs

4.18.1

Patch Changes

  • #4446 5936d9cd4d4 Thanks @salihozdemir! - refactor: increase accessibility of auth page components

    add htmlFor to label elements to associate them with their inputs

4.18.0

Minor Changes

  • #4430 cf07d59587f Thanks @aliemir! - Added queryMeta and mutationMeta properties to the useForm hook. These properties are used to pass specific meta values to the query or mutation. This is useful when you have overlapping values in your data provider's getOne and update methods. For example, you may want to change the method of the mutation to PATCH but if you pass it in the meta property, you'll end up changing the method of the getOne request as well.

    queryMeta and mutationMeta has precedence over meta. This means that if you have the same property in queryMeta and meta, the value in queryMeta will be used.

    Usage

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

export const MyEditPage = () => {
    const form = useForm({
        // this is passed both to the mutation and the query requests
        meta: {
            myValue: "myValue",
        },
        // this is only passed to the query request
        queryMeta: {
            propertyOnlyWorksForQuery: "propertyOnlyWorksForQuery",
        },
        // this is only passed to the mutation request
        mutationMeta: {
            propertyOnlyWorksForMutation: "propertyOnlyWorksForMutation",
        },
    });
};

Patch Changes

4.17.0

Minor Changes

  • #4430 cf07d59587f Thanks @aliemir! - Added queryMeta and mutationMeta properties to the useForm hook. These properties are used to pass specific meta values to the query or mutation. This is useful when you have overlapping values in your data provider's getOne and update methods. For example, you may want to change the method of the mutation to PATCH but if you pass it in the meta property, you'll end up changing the method of the getOne request as well.

    queryMeta and mutationMeta has precedence over meta. This means that if you have the same property in queryMeta and meta, the value in queryMeta will be used.

    Usage

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

export const MyEditPage = () => {
    const form = useForm({
        // this is passed both to the mutation and the query requests
        meta: {
            myValue: "myValue",
        },
        // this is only passed to the query request
        queryMeta: {
            propertyOnlyWorksForQuery: "propertyOnlyWorksForQuery",
        },
        // this is only passed to the mutation request
        mutationMeta: {
            propertyOnlyWorksForMutation: "propertyOnlyWorksForMutation",
        },
    });
};

Patch Changes

4.16.4

Patch Changes

4.16.3

Patch Changes

4.16.2

Patch Changes

  • #4407 473bbe5b31d Thanks @aliemir! - Added missing clone action for document title generation. This fixes the issue of the document title not being generated when the clone action is used.

    This change introduces the documentTitle.{resourceName}.clone key to the list of i18n keys that are used to generate the document title.

    Default title for the clone action is "#{{id}} Clone {{resourceName}} | refine".

  • #4407 473bbe5b31d Thanks @aliemir! - Fixed the issue of label not taken into account with auto generated document titles. label will be prioritized over the resource name when generating the document title and the label will not be capitalized.

4.16.1

Patch Changes

  • #4407 473bbe5b31d Thanks @aliemir! - Added missing clone action for document title generation. This fixes the issue of the document title not being generated when the clone action is used.

    This change introduces the documentTitle.{resourceName}.clone key to the list of i18n keys that are used to generate the document title.

    Default title for the clone action is "#{{id}} Clone {{resourceName}} | refine".

  • #4407 473bbe5b31d Thanks @aliemir! - Fixed the issue of label not taken into account with auto generated document titles. label will be prioritized over the resource name when generating the document title and the label will not be capitalized.

4.16.0

Minor Changes

  • #4313 28fe67047a0 Thanks @abdellah711! - feat: implement generateDefaultDocumentTitle function

    This function generates a default document title based on the current route by following these rules (resource in this case is "Post"):

    • list -> Posts | refine
    • edit -> #{id} Edit Post | refine
    • show -> #{id} Show Post | refine
    • create -> Create new Post | refine
    • default (not a resource) -> refine

Patch Changes

4.15.0

Minor Changes

  • #4313 28fe67047a0 Thanks @abdellah711! - feat: implement generateDefaultDocumentTitle function

    This function generates a default document title based on the current route by following these rules (resource in this case is "Post"):

    • list -> Posts | refine
    • edit -> #{id} Edit Post | refine
    • show -> #{id} Show Post | refine
    • create -> Create new Post | refine
    • default (not a resource) -> refine

Patch Changes

4.14.3

Patch Changes

4.14.2

Patch Changes

4.14.1

Patch Changes

4.14.0

Minor Changes

  • #4241 fbe109b5a8b Thanks @salihozdemir! - Added new generic types to the useForm hooks. Now you can pass the query types and the mutation types to the hook.

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

useForm<
    TQueryFnData,
    TError,
    TVariables,
    TData,
    TResponse,
    TResponseError
>();

4.13.0

Minor Changes

  • #4241 fbe109b5a8b Thanks @salihozdemir! - Added new generic types to the useForm hooks. Now you can pass the query types and the mutation types to the hook.

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

useForm<
    TQueryFnData,
    TError,
    TVariables,
    TData,
    TResponse,
    TResponseError
>();

4.12.0

Minor Changes

  • #4194 8df15fe0e4e Thanks @alicanerdurmaz! - feat: sorters.mode prop added to useTable and useDataGrid hooks. This prop handles the sorting mode of the table. It can be either server or off.

    • "off": sorters are not sent to the server. You can use the sorters value to sort the records on the client side.
    • "server": Sorting is done on the server side. Records will be fetched by using the sorters value.

    feat:filters.mode prop added to useTable and useDataGrid hooks. This prop handles the filtering mode of the table. It can be either server or off.

    • "off": filters are not sent to the server. You can use the filters value to filter the records on the client side.
    • "server": Filtering is done on the server side. Records will be fetched by using the filters value.

Patch Changes

4.11.0

Minor Changes

  • #4194 8df15fe0e4e Thanks @alicanerdurmaz! - feat: sorters.mode prop added to useTable and useDataGrid hooks. This prop handles the sorting mode of the table. It can be either server or off.

    • "off": sorters are not sent to the server. You can use the sorters value to sort the records on the client side.
    • "server": Sorting is done on the server side. Records will be fetched by using the sorters value.

    feat:filters.mode prop added to useTable and useDataGrid hooks. This prop handles the filtering mode of the table. It can be either server or off.

    • "off": filters are not sent to the server. You can use the filters value to filter the records on the client side.
    • "server": Filtering is done on the server side. Records will be fetched by using the filters value.

Patch Changes

4.10.0

Minor Changes

  • #4135 e72c0d2b41f Thanks @salihozdemir! - feat: Expose the query params to the meta and add the ability to pass global meta to data provider methods

    • Added the ability to pass meta to data provider methods globally for specific resources.

      For example, to pass the role property to all data provider methods for the posts resource, use the following code:

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

const App: React.FC = () => {
    return (
        <Refine
            resources={[
                {
                    name: "posts",
                    meta: {
                        role: "editor",
                    },
                },
            ]}
        />
    );
};

      Now, when you call any data hook with the posts resource, the meta property will be accessible in the data provider methods.

      const dataProvider = {
    getList: async ({ resource, meta }) => {
        console.log(meta.role); // "editor"
    },
};

    • Added the query params to the meta property by default.

      For example, if you call the useList hook on the example.com/posts?status=published URL, the meta property will be accessible in the data provider methods as follows:

      const dataProvider = {
    getList: async ({ resource, meta }) => {
        console.log(meta.status); // "published"
    },
};

Patch Changes

  • #4159 f7f590589e7 Thanks @aliemir! - fixed: missing resource meta in route compositions

    Added missing resource meta values when composing routes. This fixes the bug where the resource meta values does not included in the route composition.

4.9.0

Minor Changes

  • #4135 e72c0d2b41f Thanks @salihozdemir! - feat: Expose the query params to the meta and add the ability to pass global meta to data provider methods

    • Added the ability to pass meta to data provider methods globally for specific resources.

      For example, to pass the role property to all data provider methods for the posts resource, use the following code:

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

const App: React.FC = () => {
    return (
        <Refine
            resources={[
                {
                    name: "posts",
                    meta: {
                        role: "editor",
                    },
                },
            ]}
        />
    );
};

      Now, when you call any data hook with the posts resource, the meta property will be accessible in the data provider methods.

      const dataProvider = {
    getList: async ({ resource, meta }) => {
        console.log(meta.role); // "editor"
    },
};

    • Added the query params to the meta property by default.

      For example, if you call the useList hook on the example.com/posts?status=published URL, the meta property will be accessible in the data provider methods as follows:

      const dataProvider = {
    getList: async ({ resource, meta }) => {
        console.log(meta.status); // "published"
    },
};

Patch Changes

  • #4159 f7f590589e7 Thanks @aliemir! - fixed: missing resource meta in route compositions

    Added missing resource meta values when composing routes. This fixes the bug where the resource meta values does not included in the route composition.

4.8.5

Patch Changes

4.8.4

Patch Changes

4.8.3

Patch Changes

4.8.2

Patch Changes

4.8.1

Patch Changes

4.8.0

Minor Changes

  • #4113 1c13602e308 Thanks @salihozdemir! - Added missing third generic parameter to hooks which are using useQuery internally.

    For example:

    import { useOne, HttpError } from "@refinedev/core";

const { data } = useOne<{ count: string }, HttpError, { count: number }>({
    resource: "product-count",
    queryOptions: {
        select: (rawData) => {
            return {
                data: {
                    count: Number(rawData?.data?.count),
                },
            };
        },
    },
});

console.log(typeof data?.data.count); // number

Patch Changes

  • #4129 e64ffe999b3 Thanks @aliemir! - Added the missing connection between the data provider's and the useMany hook's meta property.

  • #4113 1c13602e308 Thanks @salihozdemir! - Updated the generic type name of hooks that use useQuery to synchronize generic type names with tanstack-query.

4.7.2

Patch Changes

4.7.1

Patch Changes

4.7.0

Minor Changes

Patch Changes

4.6.0

Minor Changes

Patch Changes

4.5.10

Patch Changes

  • #4035 e0c75450f97 Thanks @salihozdemir! - Add types for notification methods arguments based on given generic types.

  • #4071 98cd4b0f203 Thanks @salihozdemir! - Update authBindings error type to provide changeable error messages on notifcations.

    Example for login method:

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

const authProvider: AuthBindings = {
    login: async ({ email, password }) => {
        ...
        return {
            success: false,
            error: {
                message: "Login Failed!",
                name:
                    "The email or password that you've entered doesn't match any account.",
            },
        };
    },
    ...
};

4.5.9

Patch Changes

  • #4035 e0c75450f97 Thanks @salihozdemir! - Add types for notification methods arguments based on given generic types.

  • #4071 98cd4b0f203 Thanks @salihozdemir! - Update authBindings error type to provide changeable error messages on notifcations.

    Example for login method:

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

const authProvider: AuthBindings = {
    login: async ({ email, password }) => {
        ...
        return {
            success: false,
            error: {
                message: "Login Failed!",
                name:
                    "The email or password that you've entered doesn't match any account.",
            },
        };
    },
    ...
};

4.5.8

Patch Changes

  • #4014 3db450fade0 Thanks @salihozdemir! - Add console warning for useForm and useShow hooks when custom resource is provided and id prop is not passed.

4.5.7

Patch Changes

  • #4014 3db450fade0 Thanks @salihozdemir! - Add console warning for useForm and useShow hooks when custom resource is provided and id prop is not passed.

4.5.6

Patch Changes

4.5.5

Patch Changes

4.5.4

Patch Changes

4.5.3

Patch Changes

4.5.2

Patch Changes

  • #3911 5f9c70ebf2f Thanks @salihozdemir! - In forms that use useForm, the onFinish was resetting the current id to undefined when the mutation is successful. Now, the id will not be set to undefined.

4.5.1

Patch Changes

  • #3911 5f9c70ebf2f Thanks @salihozdemir! - In forms that use useForm, the onFinish was resetting the current id to undefined when the mutation is successful. Now, the id will not be set to undefined.

4.5.0

Minor Changes

  • #3912 0ffe70308b2 Thanks @alicanerdurmaz! - - title prop added to AuthPage's renderContent prop to use in the custom content.
    • title prop added to AuthPage to render a custom title.
      • ⚠️ These features have not been implemented yet. Only types were added. It will be implemented in the next release.

4.4.0

Minor Changes

  • #3912 0ffe70308b2 Thanks @alicanerdurmaz! - - title prop added to AuthPage's renderContent prop to use in the custom content.
    • title prop added to AuthPage to render a custom title.
      • ⚠️ These features have not been implemented yet. Only types were added. It will be implemented in the next release.

4.3.0

Minor Changes

  • #3892 41a4525454c Thanks @BatuhanW! - feat: make CanAccess component props optional. Now CanAccess component infers resource and action automagically.

4.2.0

Minor Changes

  • #3892 41a4525454c Thanks @BatuhanW! - feat: make CanAccess component props optional. Now CanAccess component infers resource and action automagically.

4.1.6

Patch Changes

  • #3890 db12d60095f Thanks @aliemir! - - Fixed layout flickering on authenticated routes.
    • Fixed repeated navigations issue on routes with <Authenticated> component.
    • Fixed conflicting navigation paths with authProvider methods and <Authenticated> component.

4.1.5

Patch Changes

  • #3890 db12d60095f Thanks @aliemir! - - Fixed layout flickering on authenticated routes.
    • Fixed repeated navigations issue on routes with <Authenticated> component.
    • Fixed conflicting navigation paths with authProvider methods and <Authenticated> component.

4.1.4

Patch Changes

4.1.3

Patch Changes

4.1.2

Patch Changes

4.1.1

Patch Changes

4.1.0

Minor Changes

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

    🪄 Migrating your project automatically with refine-codemod ✨

    @refinedev/codemod package handles the breaking changes for your project automatically, without any manual steps. It migrates your project from 3.x.x to 4.x.x.

    Just cd into root folder of your project (where package.json is contained) and run this command:

    npx @refinedev/codemod@latest refine3-to-refine4

    And it's done. Now your project uses refine@4.x.x.

    📝 Changelog

    We're releasing a new way to connect routers to refine. Now the routerProvider prop is marked as optional in <Refine> component.

    New routerProvider property is smaller and more flexible than the previous one which is now can be used with legacyRouterProvider property.

    We've redesigned our bindings to the router libraries. Instead of handling the route creation process, now refine leaves this to the user and only uses a way to communicate with the router and the routes through the bindings provided to routerProvider property.

    The changes in routing system comes with a new way to define resource actions as well. Actions now can be defined as paths, components or both. We're encouraging our users to use paths, which enables our users to use all the optimizations that the router libraries provide without giving up any features of refine.

    Router libraries are also comes with components like RefineRoutes which can be used to define routes for resources when you pass components to the actions of the resources. Please refer to the documentation for more information.

    Changes in resources

    Now you can define actions in multiple ways;

    1. As a path
    <Refine
    resources={[
        {
            name: "posts",
            list: "/posts",
        },
    ]}
>
    ...
</Refine>
    1. As a component
    import { PostList } from "src/posts";

<Refine
    resources={[
        {
            name: "posts",
            list: PostList,
        },
    ]}
>
    ...
</Refine>;
    1. As both
    import { PostList } from "src/posts";

<Refine
    resources={[
        {
            name: "posts",
            list: {
                path: "/posts",
                component: PostList,
            },
        },
    ]}
>
    ...
</Refine>;

    This also comes with some additional changes;

    • options property is renamed to meta for consistency.
    • parentName is now defined with parent property in meta object.
    • auditLog is renamed to audit.
    • route in options is now deprecated for the new routing system. If you want to define a custom route for a resource, you can define such routes in action definitions.
    • Parents are not included in the routes by default. If you want to inclue parents in the routes, you need to define action paths explicitly.
    • identifier can be passed to the resource definition to distinguish between resources with the same name. This is useful when you have multiple resources with the same name.

    Nested routes

    Now, refine supports nested routes with parameters. You can define the action paths for a resource with parameters. Parameters will be filled with the current ones in the URL and additional ones can be provided via meta properties in hooks and components.

    <Refine
    resources={[
        {
            name: "posts",
            list: "users/:authorId/posts",
            show: "users/:authorId/posts/:id",
        },
    ]}
>

    When you're in the list page of the posts resource, assuming you already have the authorId parameter present in the URL, the show action will be rendered with the authorId parameter filled with the current one in the URL. If you want to use a different authorId, you can pass meta properties to the components or hooks, such as useGetToPath hook to get the navigation path.

    const { go } = useGo();
const getToPath = useGetToPath();

const to = getToPath({
    resource: "posts",
    action: "show",
    meta: {
        id: 1,
        authorId: 2,
    },
});
// "to" will be "/users/2/posts/1"

go({ to, type: "push" });

    Changes in routerProvider

    routerProvider is now smaller and more flexible. It only contains the following properties;

    • Link: A component that accepts to prop and renders a link to the given path.
    • go: A function that returns a function that accepts a config object and navigates to the given path.
    • back: A function that returns a function that navigates back to the previous page.
    • parse: A function that returns a function that returns the resource, id, action and additional params from the given path. This is the refine's way to communicate with the router library.

    None of the properties are required. Missing properties may result in some features not working but it won't break refine.

    Our users are able to provide different implementations for the router bindings, such as handling the search params in the path with a different way or customizing the navigation process.

    Note: Existing routerProvider implementation is preserved as legacyRouterProvider and will continue working as before. We're planning to remove it in the next major version.

    Note: New routing system do not handle the authentication process. You can now wrap your components with Authenticated component or handle the authentication check inside your components through useIsAuthenticated hook to provide more flexible auth concepts in your app.

    Changes in hooks

    We're now providing new hooks for the new routing system. You're free to use them or use the ones provided by your router library.

    • useGo
    • useBack
    • useParsed
    • useLink
    • useGetToPath

    are provided by refine to use the properties of routerProvider in a more convenient way.

    • useResourceWithRoute is now deprecated and only works with the legacy routing system.
    • useResource has changed its definition and now accepts a single argument which is the resource name. It returns the resource object depending on the current route or the given resource name. If resource is provided but not found, it will create a temporary one to use with the given resource name.
    • useNavigation's functions in its return value are now accepting meta object as an argument. This can be used to provide parameters to the target routes. For example, if your path for the edit action of a resource is /:userId/posts/:id/edit, you can provide userId parameter in meta object and it will be used in the path.
    • Hooks using routes, redirection etc. are now accepts meta property in their arguments. This can be used to provide parameters to the target routes. This change includes useMenu and useBreadcrumb which are creating paths to the resources for their purposes.
    • selectedKey in useMenu hook's return type now can be undefined if the current route is not found in the menu items.

    warnWhenUnsavedChanges prop

    In earlier versions, refine was handling this feature in beforeunload event. This was causing unintended dependencies to the window and was not customizable. Now, refine is leaving this to the router libraries. Router packages @refinedev/react-router-v6, @refinedev/nextjs-router and @refinedev/remix-router are now exporting a component UnsavedChangesNotifier which can be placed under the <Refine> component and registers a listener to the necessary events to handle the warnWhenUnsavedChanges feature.

    Changes in Authenticated component.

    <Authenticated> component now accepts redirectOnFail to override the redirection path on authentication failure. This can be used to redirect to a different page when the user is not authenticated. This property only works if the fallback prop is not provided.

    redirectOnFail also respects the newly introduced appendCurrentPathToQuery prop which can be used to append the current path to the query string of the redirection path. This can be used to redirect the user to the page they were trying to access after they logged in.

    Changes in <Refine>

    We've removed the long deprecated props from <Refine /> component and deprecated some more to encourage users to use the new routing system.

    In earlier versions, we've accepted layout related props such as Layout, Sider, Header, Footer, OffLayoutArea and Title. All these props were used in the route creation process while wrapping the components to the Layout and others were passed to the Layout for configuration. Now, we've deprecated these props and we're encouraging users to use Layout prop and its props in the children of <Refine /> component. This will allow users to customize the layout easily and provide custom layouts per route.

    We've also deprecated the route related props such as;

    • catchAll, which was used in rendering 404 pages and was unclear to the user when its going to be rendered in the app.
    • LoginPage, which was rendered at /login path and was not customizable enough.
    • DashboardPage, which wass rendered at / path and was limiting our users to handle the index page just with a single prop.
    • ReadyPage, which was shown when <Refine> had no resources defined. Now, we're accepting empty resources array and rendering nothing in this case.

    We're encouraging our users to create their own routes for the above props and give them the flexibility to use the full potential of the router library they're using.

    Integration with existing apps

    We've made the changes to the routing system, the resource definitions and some additional changes to make the integration with existing apps possible.

    Now you can migrate your existing apps to refine with ease and incrementally adopt refine's features.

    Backward compatibility

    We've made all the changes in a backward compatible way. You can continue using the old routing system and the old props of <Refine /> component. Migrating to the new behaviors are optional but encouraged.

    We're planning to keep the support for the deprecated props and the old behaviors until the next major version.

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! Added audit log support for the following hooks:

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! Added a helper function to pick not deprecated value. Gives priority according to the order of the arguments.

    const sorter = undefined;
const sorters = [{ id: 1 }];

const value = pickNotDeprecated(sorter, sorters) ?? 10; // [{ id: 1 }]

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

    useList hook

    • Added default value for pagination.current property. It is set to 1.
    • Added default value for pagination.pageSize property. It is set to 10.
    • Added pagination.mode property. By default, it is "server".
      • When it is "off", all records will be fetched from the API.
      • When it is "client", all records will be fetched from the API and pagination will be handled by the useList hook.
      • When it is "server", pagination will be handled by the API using current and pageSize properties of your pagination object.

    useTable hook

    useTable return values and properties are updated.

    • initialCurrent and initialPageSize props are now deprecated. Use pagination prop instead.

    • To ensure backward compatibility, initialCurrent and initialPageSize props will work as before.

      useTable({
-    initialCurrent,
-    initialPageSize,
+    pagination: {
+        current,
+        pageSize,
+    },
})

    • hasPagination prop is now deprecated. Use pagination.mode instead.

    • To ensure backward compatibility, hasPagination prop will work as before.

      useTable({
-    hasPagination,
+    pagination: {
+        mode: "off" | "server" | "client",
+    },
})

    • initialSorter and permanentSorter props are now deprecated. Use sorters.initial and sorters.permanent instead.

    • To ensure backward compatibility, initialSorter and permanentSorter props will work as before.

      useTable({
-    initialSorter,
-    permanentSorter,
+    sorters: {
+        initial,
+        permanent,
+    },
})

    • initialFilter, permanentFilter, and defaultSetFilterBehavior props are now deprecated. Use filters.initial, filters.permanent, and filters.defaultBehavior instead.

    • To ensure backward compatibility, initialFilter, permanentFilter, and defaultSetFilterBehavior props will work as before.

      useTable({
-    initialFilter,
-    permanentFilter,
-    defaultSetFilterBehavior,
+    filters: {
+        initial,
+        permanent,
+        defaultBehavior,
+    },
})

    • sorter and setSorter return values are now deprecated. Use sorters and setSorters instead.

    • To ensure backward compatibility, sorter and setSorter return values will work as before.

      const {
-   sorter,
+   sorters,
-   setSorter,
+   setSorters,
} = useTable();

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! All @tanstack/react-query imports re-exported from @refinedev/core have been removed. You should import them from @tanstack/react-query package directly.

    If the package is not installed, you can install it with your package manager:

    npm install @tanstack/react-query
# or
pnpm add @tanstack/react-query
# or
yarn add @tanstack/react-query

    After that, you can import them from @tanstack/react-query package directly instead of @refinedev/core package.

    - import { QueryClient } from "@refinedev/core";

+ import { QueryClient } from "@tanstack/react-query";

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

    • options prop of resource is now deprecated. Use meta prop instead.
    • To ensure backward compatibility, options prop will be used if meta prop is not provided.
    <Refine
    resources={[
        {
            name: "posts",
-           options: {},
+           meta: {},
        },
    ]}
/>

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

    • AuthProvider deprecated and renamed to LegacyAuthProvider.
    • legacyAuthProvider prop is added to <Refine> component for backward compatibility.
    • legacy prop added to auth hooks support AuthProvider and LegacyAuthProvider.

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

    • <ReadyPage> isnow deprecated.
    • Created a <WelcomePage> component to welcome users.

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!

    • useList and useInfiniteList's config prop is now deprecated. Use sorters, filters, pagination and hasPagination props instead.
    useList({
-    config: {
-        sort,
-        filters,
-        pagination,
-        hasPagination,
-    },
+    sorters,
+    filters,
+    pagination,
+    hasPagination,
})

useInfiniteList({
-    config: {
-        sort,
-        filters,
-        pagination,
-        hasPagination,
-    },
+    sorters,
+    filters,
+    pagination,
+    hasPagination,
})
    • useImport and useExport's resourceName prop is now deprecated. Use resource prop instead.
    useImport({
-    resourceName,
+    resource,
})

useExport({
-    resourceName,
+    resource,
})
    • useExport's sorter prop is now deprecated. Use sorters prop instead.
    useExport({
-    sorter,
+    sorters,
})
    • useSelect's sort prop is now deprecated. Use sorters prop instead.
    useSelect({
-    sort,
+    sorters,
})
    • useSelect's config.sort prop is now deprecated. Use config.sorters prop instead.
    useCustom({
    config: {
-       sort,
+       sorters,
    }
})

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! hasPagination default value set to false on useSelect. So all of the records will be fetched by default.

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! Updated useSelect hook to support optionLabel and optionValue type as keyof TData instead of string.

    So optionLabel and optionValue have an interface based on the given TData type.

    - optionLabel?: string;
- optionValue?: string;
+ optionLabel?: keyof TData extends string ? keyof TData : never;
+ optionValue?: keyof TData extends string ? keyof TData : never;

  • Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! Moving to the @refinedev scope 🎉🎉

    Moved to the @refinedev scope and updated our packages to use the new scope. From now on, all packages will be published under the @refinedev scope with their new names.

    Now, we're also removing the refine prefix from all packages. So, the @pankod/refine-core package is now @refinedev/core, @pankod/refine-antd is now @refinedev/antd, and so on.

Patch Changes

3.103.0

Minor Changes

3.102.0

Minor Changes

3.101.2

Patch Changes

3.101.1

Patch Changes

3.101.0

Minor Changes

3.100.0

Minor Changes

3.99.6

Patch Changes

  • #3657 5868456194f Thanks @fuunnx! - Fix optimistic updates of list's query data following a mutation using useUpdate

3.99.5

Patch Changes

  • #3657 5868456194f Thanks @fuunnx! - Fix optimistic updates of list's query data following a mutation using useUpdate

3.99.4

Patch Changes

3.99.3

Patch Changes

3.99.2

Patch Changes

3.99.1

Patch Changes

3.99.0

Minor Changes

3.98.0

Minor Changes

3.97.0

Minor Changes

  • #3442 8f2954611fa Thanks @salihozdemir! - Added swizzle support for @pankod/refine-core package.

    Swizzleable components:

    • Authenticated
    • CanAccess
    • ErrorPage
    • Authentication Pages
      • Login
      • Logout
      • Register
      • ForgotPassword
      • UpdatePassword

Patch Changes

3.96.0

Minor Changes

  • #3442 8f2954611fa Thanks @salihozdemir! - Added swizzle support for @pankod/refine-core package.

    Swizzleable components:

    • Authenticated
    • CanAccess
    • ErrorPage
    • Authentication Pages
      • Login
      • Logout
      • Register
      • ForgotPassword
      • UpdatePassword

Patch Changes

3.95.3

Patch Changes

  • #3382 6604586b030 Thanks @alicanerdurmaz! - Fixed: The link in the jsDOC of the liveMode replaced with the correct link.

    - * @type  [`"auto" | "manual" | "off"`](/docs/api-reference/core/interfaceReferences/#crudsorting)
+ * @type  [`"auto" | "manual" | "off"`](/docs/api-reference/core/providers/live-provider/#livemode)

3.95.2

Patch Changes

  • #3382 6604586b030 Thanks @alicanerdurmaz! - Fixed: The link in the jsDOC of the liveMode replaced with the correct link.

    - * @type  [`"auto" | "manual" | "off"`](/docs/api-reference/core/interfaceReferences/#crudsorting)
+ * @type  [`"auto" | "manual" | "off"`](/docs/api-reference/core/providers/live-provider/#livemode)

3.95.1

Patch Changes

3.95.0

Minor Changes

3.94.2

Patch Changes

  • #3364 98a1fbec65a Thanks @aliemir! - Changed IResourceComponents from IResourceContext to use React.ComponentType rather than React.FunctionComponent to make it compatible with other types and interfaces.

  • #3356 310ebd05990 Thanks @omeraplak! - Fixed checkError hook is not called in onError of useCustomMutation

3.94.1

Patch Changes

  • #3364 98a1fbec65a Thanks @aliemir! - Changed IResourceComponents from IResourceContext to use React.ComponentType rather than React.FunctionComponent to make it compatible with other types and interfaces.

  • #3356 310ebd05990 Thanks @omeraplak! - Fixed checkError hook is not called in onError of useCustomMutation

3.94.0

Minor Changes

3.93.0

Minor Changes

3.92.0

Minor Changes

  • #3324 9bfb34749bc Thanks @aliemir! - Added the ability to pass mutation options to useMutation hooks in mutation hooks:
    • useCreate (data)
    • useUpdate (data)
    • useDelete (data)
    • useDeleteMany (data)
    • useUpdateMany (data)
    • useCreateMany (data)
    • useCustomMutation (data)
    • useLogin (auth)
    • useLogout (auth)
    • useRegister (auth)
    • useForgotPassword (auth)
    • useUpdatePassword (auth)
    • useForm (form)

Patch Changes

3.91.0

Minor Changes

  • #3324 9bfb34749bc Thanks @aliemir! - Added the ability to pass mutation options to useMutation hooks in mutation hooks:
    • useCreate (data)
    • useUpdate (data)
    • useDelete (data)
    • useDeleteMany (data)
    • useUpdateMany (data)
    • useCreateMany (data)
    • useCustomMutation (data)
    • useLogin (auth)
    • useLogout (auth)
    • useRegister (auth)
    • useForgotPassword (auth)
    • useUpdatePassword (auth)
    • useForm (form)

Patch Changes

3.90.6

Patch Changes

3.90.5

Patch Changes

3.90.4

Patch Changes

  • #3098 a241ef3c957 Thanks @aliemir! - Update notificationProvider prop handling by converting to a custom hook to prevent hook usage errors.

3.90.3

Patch Changes

  • #3098 a241ef3c957 Thanks @aliemir! - Update notificationProvider prop handling by converting to a custom hook to prevent hook usage errors.

3.90.2

Patch Changes

3.90.1

Patch Changes

3.90.0

Minor Changes

3.89.0

Minor Changes

3.88.4

Patch Changes

3.88.3

Patch Changes

3.88.2

Patch Changes

3.88.1

Patch Changes

3.88.0

Minor Changes

  • #2872 da3fc4a702 Thanks @TDP17! - Feat: Added ability to manage breadcrumb component globally via options

    Usage

    <Refine
    options= {{
        breadcrumb: false, // hide globally
    }}
/>
or
```jsx
<Refine
    options= {{
        breadcrumb: <MyCustomBreadcrumbComponent /> // custom component
    }}
/>

3.87.0

Minor Changes

  • #2872 da3fc4a702 Thanks @TDP17! - Feat: Added ability to manage breadcrumb component globally via options

    Usage

    <Refine
    options= {{
        breadcrumb: false, // hide globally
    }}
/>
or
```jsx
<Refine
    options= {{
        breadcrumb: <MyCustomBreadcrumbComponent /> // custom component
    }}
/>

3.86.2

Patch Changes

  • #2839 5388a338ab Thanks @aliemir! - useCan hook was returning the stale value if same call is made with skipped access control.

3.86.1

Patch Changes

  • #2839 5388a338ab Thanks @aliemir! - useCan hook was returning the stale value if same call is made with skipped access control.

3.86.0

Minor Changes

  • Only or was supported as a conditional filter. Now and and or can be used together and nested. 🚀

    {
  operator: "or",
  value: [
    {
      operator: "and",
      value: [
        {
          field: "name",
          operator: "eq",
          value: "John Doe",
        },
        {
          field: "age",
          operator: "eq",
          value: 30,
        },
      ],
    },
    {
      operator: "and",
      value: [
        {
          field: "name",
          operator: "eq",
          value: "JR Doe",
        },
        {
          field: "age",
          operator: "eq",
          value: 1,
        },
      ],
    },
  ],
}

3.85.0

Minor Changes

  • #2751 addff64c77 Thanks @yildirayunlu! - Only or was supported as a conditional filter. Now and and or can be used together and nested. 🚀

    {
  operator: "or",
  value: [
    {
      operator: "and",
      value: [
        {
          field: "name",
          operator: "eq",
          value: "John Doe",
        },
        {
          field: "age",
          operator: "eq",
          value: 30,
        },
      ],
    },
    {
      operator: "and",
      value: [
        {
          field: "name",
          operator: "eq",
          value: "JR Doe",
        },
        {
          field: "age",
          operator: "eq",
          value: 1,
        },
      ],
    },
  ],
}

3.84.0

Minor Changes

  • Marked getMany, createMany, updateMany and deleteMany functions as optional and substituted with getOne, create, update and deleteOne respectively. Now users can choose to skip implementing getMany, createMany, updateMany and deleteMany functions and use getOne, create, update and deleteOne functions instead.

    Breaking Change

    • getMany, createMany, updateMany and deleteMany functions are now optional and may cause type issues if used outside of the refine hooks.

3.83.0

Minor Changes

  • #2688 508045ac30 Thanks @aliemir! - Marked getMany, createMany, updateMany and deleteMany functions as optional and substituted with getOne, create, update and deleteOne respectively. Now users can choose to skip implementing getMany, createMany, updateMany and deleteMany functions and use getOne, create, update and deleteOne functions instead.

    Breaking Change

    • getMany, createMany, updateMany and deleteMany functions are now optional and may cause type issues if used outside of the refine hooks.

3.82.0

Minor Changes

  • Added useSelect(), setState handler functions are memoized

    Fixed when queryOptions.enabled = true on useSelect(), fetches all data. #2691

Patch Changes

  • fix: useSelect()'s overridden onSearch function is not calling when value is empty.

3.81.0

Minor Changes

  • #2704 e4d78052ef Thanks @alicanerdurmaz! - Added useSelect(), setState handler functions are memoized

    Fixed when queryOptions.enabled = true on useSelect(), fetches all data. #2691

Patch Changes

3.80.0

Minor Changes

  • Added infinite loading example to antd useSelect() useSelect() fetchSize prop is deprecated. From now pagination should be used

  • Added dataProviderName property to resource options. Now you can define default data provider per resource.

    Usage

    <Refine
    dataProvider={{
        default: myProvider,
        second: mySecondProvider,
    }}
    resources={[
        {
            name: "posts",
            options: {
                dataProviderName: "second",
            },
        },
    ]}
/>

Patch Changes

  • Add AuthProps type export

  • Mark default key as required for multiple data providers in dataProvider prop of <Refine /> component.

3.79.0

Minor Changes

  • #2629 bc89228e73 Thanks @bungambohlah! - Added infinite loading example to antd useSelect() useSelect() fetchSize prop is deprecated. From now pagination should be used

  • #2674 3bd6196056 Thanks @aliemir! - Added dataProviderName property to resource options. Now you can define default data provider per resource.

    Usage

    <Refine
    dataProvider={{
        default: myProvider,
        second: mySecondProvider,
    }}
    resources={[
        {
            name: "posts",
            options: {
                dataProviderName: "second",
            },
        },
    ]}
/>

Patch Changes

3.78.0

Minor Changes

  • clientConfig property now accepts QueryClient instance - #2665

    Usage

    import { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient();
const App: React.FC = () => (
    <Refine
        ...
        options={{
            reactQuery: {
                clientConfig: queryClient
            },
        }}
    />
);

3.77.0

Minor Changes

  • #2670 f260932051 Thanks @alicanerdurmaz! - clientConfig property now accepts QueryClient instance - #2665

    Usage

    import { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient();
const App: React.FC = () => (
    <Refine
        ...
        options={{
            reactQuery: {
                clientConfig: queryClient
            },
        }}
    />
);

3.76.0

Minor Changes

    • Added new component core and mantine support.
    • Move Auth types @pankod/refine-ui-types to @pankod/refine-core

Patch Changes

  • fix core data hooks type errors

3.75.1

Patch Changes

3.75.0

Minor Changes

  • #2627 c5fb45d61f Thanks @yildirayunlu! - - Added new component core and mantine support.
    • Move Auth types @pankod/refine-ui-types to @pankod/refine-core

3.74.8

Patch Changes

  • add props table to useCan documentation

3.74.7

Patch Changes

3.74.6

Patch Changes

  • Updated devtoolConfig type.

3.74.5

Patch Changes

3.74.4

Patch Changes

  • Fixed useMenu hook is not reacting to locale change - #2598

3.74.3

Patch Changes

3.74.2

Patch Changes

  • Removed redundant type inheritance

3.74.1

Patch Changes

3.74.0

Minor Changes

  • Combine action related types into a single file and derive types from it to avoid future inconsistencies.

    Renamed RedirectionTypes type to RedirectAction.

    Updated every type definition of actions to use the new Action type or derivations of it.

Patch Changes

  • Fixed the issue in resource routes not taking options.route of parent resource into account.

  • Rename reset-password -> forgot-password on docs.

3.73.0

Minor Changes

  • Combine action related types into a single file and derive types from it to avoid future inconsistencies.

    Renamed RedirectionTypes type to RedirectAction.

    Updated every type definition of actions to use the new Action type or derivations of it.

Patch Changes

  • Fixed the issue in resource routes not taking options.route of parent resource into account.

  • Rename reset-password -> forgot-password on docs.

3.72.1

Patch Changes

3.72.0

Minor Changes

  • #2486 ee4d0d112a Thanks @aliemir! - Combine action related types into a single file and derive types from it to avoid future inconsistencies.

    Renamed RedirectionTypes type to RedirectAction.

    Updated every type definition of actions to use the new Action type or derivations of it.

Patch Changes

  • #2486 ee4d0d112a Thanks @aliemir! - Fixed the issue in resource routes not taking options.route of parent resource into account.

3.71.2

Patch Changes

  • Fix useImport hook requests with properly invoking requests sequentially and manage progress state.

  • Removed children property from useCans params.resource since it can be in ITreeMenu type and React.ReactNode breaks the react-querys key stringify function.

  • Fixed undoable mutation is called many times - #2556

3.71.1

Patch Changes

  • #2560 373cee23ba Thanks @aliemir! - Fix useImport hook requests with properly invoking requests sequentially and manage progress state.

  • #2537 4407bf8825 Thanks @ozkalai! - Removed children property from useCans params.resource since it can be in ITreeMenu type and React.ReactNode breaks the react-querys key stringify function.

  • #2559 75b699cd6c Thanks @omeraplak! - Fixed undoable mutation is called many times - #2556

3.71.0

Minor Changes

    • Renamed resetPassword in AuthProvider to forgotPassword
    • Renamed useResetPassword hook to useForgotPassword

3.70.0

Minor Changes

  • #2524 27bf81bebb Thanks @biskuvit! - - Renamed resetPassword in AuthProvider to forgotPassword
    • Renamed useResetPassword hook to useForgotPassword

3.69.9

Patch Changes

  • Add register function to AuthContextProvider for invalidate auth store queries.

  • Fixed version of react-router to 6.3.0

3.69.8

Patch Changes

3.69.7

Patch Changes

3.69.6

Patch Changes

  • Fix import of react-query DevtoolsOptions interface

3.69.5

Patch Changes

3.69.4

Patch Changes

  • Fixed default login page for headless

3.69.3

Patch Changes

3.69.2

Patch Changes

  • Update useForm and useShow hooks to watch for id from props and update the query with the new id when it changes.

3.69.1

Patch Changes

  • #2467 21bb649bc7 Thanks @aliemir! - Update useForm and useShow hooks to watch for id from props and update the query with the new id when it changes.

3.69.0

Minor Changes

  • Adding more CRUD Filter Operators
  • Add initialData support to DashboardPage for @pankod/refine-nextjs-router.

3.68.0

Minor Changes

3.67.0

Minor Changes

  • Updated the generation of type declarations, moved the declarations from tsup to tsc for a better experience with Peek Definition and Go to Definition features. After this change, it's expected to navigate to the source code of the refine packages instead of the dist directory with combined declarations.
  • Removed jose dependency.
  • Remove decamelize dependency from humanizeString helper and replace the functionality with regExp.

Patch Changes

  • Fixed the issue with the TS compiler and useResource hooks return type.
  • Pass dataProviderName prop to mutations in @pankod/refine-core's useImport hook.

3.66.1

Patch Changes

  • #2448 f1edb19979 Thanks @aliemir! - Pass dataProviderName prop to mutations in @pankod/refine-core's useImport hook.

3.66.0

Minor Changes

  • #2440 0150dcd070 Thanks @aliemir! - Updated the generation of type declarations, moved the declarations from tsup to tsc for a better experience with Peek Definition and Go to Definition features. After this change, it's expected to navigate to the source code of the refine packages instead of the dist directory with combined declarations.
  • #2443 2c428b3105 Thanks @ozkalai! - Remove decamelize dependency from humanizeString helper and replace the functionality with regExp.

Patch Changes

3.65.3

Patch Changes

  • Fixed, loginLink and registerLink texts and remove unnecessary props from forms
  • Fixed syncWithLocation not tracking when useTable filters were reset

3.65.2

Patch Changes

3.65.1

Patch Changes

3.65.0

Minor Changes

  • 🎉 Added AuthPage component to the refine app. This page is used to login, register, forgot password and update password. Login page is default page and old LoginPage component is deprecated.

    New Auth Hooks

    📌 Added useRegister hook. This hook is used to register new user. useRegister falls into register function of AuthProvider.

    📌 Added useForgotPassword hook. This hook is used to forgot password. useForgotPassword falls into forgotPassword function of AuthProvider.

    📌 Added useUpdatePassword hook. This hook is used to update password. useUpdatePassword falls into updatePassword function of AuthProvider.

    - <LoginPage>
+ <AuthPage>

    New AuthPage props:

    interface IAuthPageProps extends IAuthCommonProps {
    type?: "login" | "register" | "forgotPassword" | "updatePassword";
}

interface IAuthCommonProps {
    submitButton?: React.ReactNode;
    registerLink?: React.ReactNode;
    loginLink?: React.ReactNode;
    forgotPasswordLink?: React.ReactNode;
    updatePasswordLink?: React.ReactNode;
    backLink?: React.ReactNode;
    providers?: IProvider[];
}

interface IProvider {
    name: string;
    icon?: React.ReactNode;
    label?: string;
}

Patch Changes

  • Fixed <AuthPage> by adding missing props to "login" and "register" pages.

    Fixed <Refine> component LoginPage property.

3.64.2

Patch Changes

  • #2415 f7c98f0ef9 Thanks @biskuvit! - Fixed <AuthPage> by adding missing props to "login" and "register" pages.

    Fixed <Refine> component LoginPage property.

3.64.1

Patch Changes

  • #2299 a02cb9e8ef Thanks @biskuvit! - 🎉 Added AuthPage to the refine app. This page is used to login, register, forgot password and update password. Login page is default page and old LoginPage component is deprecated.

    New Auth Hooks

    📌 Added useRegister hook. This hook is used to register new user. useRegister falls into register function of AuthProvider.

    📌 Added useForgotPassword hook. This hook is used to forgot password. useForgotPassword falls into forgotPassword function of AuthProvider.

    📌 Added useUpdatePassword hook. This hook is used to update password. useUpdatePassword falls into updatePassword function of AuthProvider.

    - <LoginPage>
+ <AuthPage>

    New AuthPage props:

    interface IAuthPageProps extends IAuthCommonProps {
    type?: "login" | "register" | "forgotPassword" | "updatePassword";
}

interface IAuthCommonProps {
    registerLink?: React.ReactNode;
    loginLink?: React.ReactNode;
    forgotPasswordLink?: React.ReactNode;
    updatePasswordLink?: React.ReactNode;
    backLink?: React.ReactNode;
    providers?: IProvider[];
}

interface IProvider {
    name: string;
    icon?: React.ReactNode;
    label?: string;
}

    Add AuthPage as a default page to Routers

    📌 Added AuthPage to the refine-nextjs-router. Default page is AuthPage.

    📌 Added AuthPage to the refine-react-location. Default page is AuthPage.

    📌 Added AuthPage to the refine-react-router-v6. Default page is AuthPage.

    📌 Added AuthPage to the refine-remix-router. Default page is AuthPage.

3.64.0

Minor Changes

  • Add an option to hide resources from the Sider menu

    <Refine
    ...
    ...
    resources={[
        {
            name: "posts",
            list: PostList,
            options: {
                hide: true,
            },
        },
    ]}
/>

  • Add object path syntax support for the useSelect hook

    useSelect({
    resource: "posts",
    optionLabel: "nested.title",
    optionLabel: "nested.id",
});

3.63.0

Minor Changes

  • #2391 e530670c2d Thanks @omeraplak! - Add an option to hide resources from the Sider menu

    <Refine
    ...
    ...
    resources={[
        {
            name: "posts",
            list: PostList,
            options: {
                hide: true,
            },
        },
    ]}
/>

  • #2395 3019fae7a0 Thanks @omeraplak! - Add object path syntax support for the useSelect hook

    useSelect({
    resource: "posts",
    optionLabel: "nested.title",
    optionLabel: "nested.id",
});

3.62.1

Patch Changes

  • fix redirectPage return value #2377

3.62.0

Minor Changes

  • Added a new <Refine> component property: options.

    Previously, the options were passed as a property to the <Refine> component. Now, the options are passed to the <Refine> via options property like this:

        <Refine
-       mutationMode="undoable"
-       undoableTimeout={5000}
-       warnWhenUnsavedChanges
-       syncWithLocation
-       liveMode="off"
-       disableTelemetry={false}
+       options={{
+           mutationMode: "undoable",
+           undoableTimeout: 5000,
+           warnWhenUnsavedChanges: true,
+           syncWithLocation: true,
+           liveMode: "off",
+           disableTelemetry: false,
+       }}
    />

  • Added a new redirect feature. It is now possible to set default redirects.

    By default, when a form is submitted, it will redirect to the "list" page of the current resource. You can change this behavior by setting the redirect parameter like this:

    <Refine
    ...
    options={{ redirect: { afterCreate: "show", afterClone: "edit", afterEdit: false }, }}
/>

Patch Changes

    • lodash moved to "dependencies" for CommonJS builds
    • Fixed lodash-es usage for ESM builds

3.61.1

Patch Changes

3.61.0

Minor Changes

  • Added a new <Refine> component property: options.

    Previously, the options were passed as a property to the <Refine> component. Now, the options are passed to the <Refine> via options property like this:

        <Refine
-       mutationMode="undoable"
-       undoableTimeout={5000}
-       warnWhenUnsavedChanges
-       syncWithLocation
-       liveMode="off"
-       disableTelemetry={false}
+       options={{
+           mutationMode: "undoable",
+           undoableTimeout: 5000,
+           warnWhenUnsavedChanges: true,
+           syncWithLocation: true,
+           liveMode: "off",
+           disableTelemetry: false,
+       }}
    />

  • Added a new redirect feature. It is now possible to set default redirects.

    By default, when a form is submitted, it will redirect to the "list" page of the current resource. You can change this behavior by setting the redirect parameter like this:

    <Refine
    ...
    options={{ redirect: { afterCreate: "show", afterClone: "edit", afterEdit: false }, }}
/>

Patch Changes

    • lodash moved to "dependencies" for CommonJS builds
    • Fixed lodash-es usage for ESM builds

3.60.0

Minor Changes

  • Added a new <Refine> component property: options.

    Previously, the options were passed as a property to the <Refine> component. Now, the options are passed to the <Refine> via options property like this:

        <Refine
-       mutationMode="undoable"
-       undoableTimeout={5000}
-       warnWhenUnsavedChanges
-       syncWithLocation
-       liveMode="off"
-       disableTelemetry={false}
+       options={{
+           mutationMode: "undoable",
+           undoableTimeout: 5000,
+           warnWhenUnsavedChanges: true,
+           syncWithLocation: true,
+           liveMode: "off",
+           disableTelemetry: false,
+       }}
    />

  • Added a new redirect feature. It is now possible to set default redirects.

    By default, when a form is submitted, it will redirect to the "list" page of the current resource. You can change this behavior by setting the redirect parameter like this:

    <Refine
    ...
    options={{ redirect: { afterCreate: "show", afterClone: "edit", afterEdit: false }, }}
/>

Patch Changes

    • lodash moved to "dependencies" for CommonJS builds
    • Fixed lodash-es usage for ESM builds

3.59.0

Minor Changes

  • #2352 e4d39eff33 Thanks @salihozdemir! - Added a new <Refine> component property: options.

    Previously, the options were passed as a property to the <Refine> component. Now, the options are passed to the <Refine> via options property like this:

        <Refine
-       mutationMode="undoable"
-       undoableTimeout={5000}
-       warnWhenUnsavedChanges
-       syncWithLocation
-       liveMode="off"
-       disableTelemetry={false}
+       options={{
+           mutationMode: "undoable",
+           undoableTimeout: 5000,
+           warnWhenUnsavedChanges: true,
+           syncWithLocation: true,
+           liveMode: "off",
+           disableTelemetry: false,
+       }}
    />

  • #2361 95e1a17cd1 Thanks @salihozdemir! - Added a new redirect feature. It is now possible to set default redirects.

    By default, when a form is submitted, it will redirect to the "list" page of the current resource. You can change this behavior by setting the redirect parameter like this:

    <Refine
    ...
    options={{ redirect: { afterCreate: "show", afterClone: "edit", afterEdit: false }, }}
/>

Patch Changes

3.58.5

Patch Changes

  • lodash moved to dependencies.

3.58.4

Patch Changes

3.58.3

Patch Changes

  • Fixed react-query devtools was consuming high CPU

3.58.2

Patch Changes

3.58.1

Patch Changes

  • AuthProvider's login method can now return a value for Remix's authentication flow

3.58.0

Minor Changes

  • Updated reactQueryDevtoolConfig prop type and added false option to disable the React Query Devtools.

3.57.0

Minor Changes

  • #2311 645391a3d9 Thanks @aliemir! - Updated reactQueryDevtoolConfig prop type and added false option to disable the React Query Devtools.

3.56.11

Patch Changes

  • Fixed user-defined URL query parameters being deleted when using syncWithLocation

3.56.10

Patch Changes

3.56.9

Patch Changes

3.56.8

Patch Changes

  • Fixed @tanstack/react-query-devtools dependency

3.56.7

Patch Changes

3.56.6

Patch Changes

  • Upgraded react-query version to 4.
  • Updated the return value of useGetIdentity. When the getUserIdentity function is not defined, it returns {} instead of undefined.

3.56.5

Patch Changes

  • #2260 a97ec592df Thanks @salihozdemir! - Updated the return value of useGetIdentity. When the getUserIdentity function is not defined, it returns {} instead of undefined.

3.56.4

Patch Changes

  • Fix useCan hook params keys.

    Since react-query stringifies the query keys, it will throw an error for a circular dependency if we include React.ReactNode elements inside the keys. The feature in #2220(https://github.com/refinedev/refine/issues/2220) includes such change and to fix this, we need to remove icon property in the resource

  • Updated <Refine/> component with memoization to prevent unwanted effects.

    • Fixed the issue: react-query's queryClient was re-initializing on every render which was causing it to reset the query cache.
    • Memoized the notificationProvider prop to prevent unnecessary re-renders.
    • Memoized the resources prop to prevent unnecessary transform calls on every render.
    • Fixed Browser back navigation is broken with syncWithLocation and paginated useTable - #2276
    • Updated push and replace args of useNavigation

3.56.3

Patch Changes

  • #2278 8b11f8a267 Thanks @biskuvit! - Fix useCan hook params keys.

    Since react-query stringifies the query keys, it will throw an error for a circular dependency if we include React.ReactNode elements inside the keys. The feature in #2220(https://github.com/refinedev/refine/issues/2220) includes such change and to fix this, we need to remove icon property in the resource

  • #2280 e22cac6d8b Thanks @aliemir! - Updated <Refine/> component with memoization to prevent unwanted effects.

    • Fixed the issue: react-query's queryClient was re-initializing on every render which was causing it to reset the query cache.
    • Memoized the notificationProvider prop to prevent unnecessary re-renders.
    • Memoized the resources prop to prevent unnecessary transform calls on every render.
  • #2279 786fb08b8b Thanks @omeraplak! - - Fixed Browser back navigation is broken with syncWithLocation and paginated useTable - #2276
    • Updated push and replace args of useNavigation

3.56.2

Patch Changes

  • Fixed invalidation of authentication caches every time checkAuth is run

3.56.1

Patch Changes

3.56.0

Minor Changes

  • Add React@18 support 🚀

3.55.0

Minor Changes

3.54.0

Minor Changes

  • Added config parameter to useCustomMutationHook to send headers.

    const apiUrl = useApiUrl();

const { mutate } = useCustomMutation<ICategory>();

mutate({
    url: `${API_URL}/categories`,
    method: "post",
    values: {
      title: "New Category",
    },
    config: {
      headers: {
          Authorization: "Bearer ****",
      },
    },
});

3.53.0

Minor Changes

  • #2245 e949df7f1c Thanks @yildirayunlu! - Added config parameter to useCustomMutationHook to send headers.

    const apiUrl = useApiUrl();

const { mutate } = useCustomMutation<ICategory>();

mutate({
    url: `${API_URL}/categories`,
    method: "post",
    values: {
      title: "New Category",
    },
    config: {
      headers: {
          Authorization: "Bearer ****",
      },
    },
});

3.52.0

Minor Changes

  • Added useCustomMutationhook for custom mutation requests.

    import { useCustomMutation } from "@pankod/refine-core";
const { mutation } = useCustomMutation();

mutation({
    url: "https://api.example.com/users",
    method: "POST",
    values: {
        name: "John Doe",
        email: "johndoe@mail.com",
    },
});

3.51.0

Minor Changes

  • #2229 878e9a105e Thanks @yildirayunlu! - Added useCustomMutationhook for custom mutation requests.

    import { useCustomMutation } from "@pankod/refine-core";
const { mutation } = useCustomMutation();

mutation({
    url: "https://api.example.com/users",
    method: "POST",
    values: {
        name: "John Doe",
        email: "johndoe@mail.com",
    },
});

3.50.0

Minor Changes

  • Pass the full resource to the accessControlProvider can method. This will enable Attribute Based Access Control (ABAC), for example granting permissions based on the value of a field in the resource object.

    const App: React.FC = () => {
    <Refine
        // other providers and props
        accessControlProvider={{
            can: async ({ resource, action, params }) => {
                if (resource === "posts" && action === "edit") {
                    return Promise.resolve({
                        can: false,
                        reason: "Unauthorized",
                    });
                }

                // or you can access directly *resource object
                // const resourceName = params?.resource?.name;
                // const anyUsefulOption = params?.resource?.options?.yourUsefulOption;
                // if (resourceName === "posts" && anyUsefulOption === true && action === "edit") {
                //     return Promise.resolve({
                //         can: false,
                //         reason: "Unauthorized",
                //     });
                // }

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

3.49.0

Minor Changes

  • #2222 43e92b9785 Thanks @omeraplak! - Pass the full resource to the accessControlProvider can method. This will enable Attribute Based Access Control (ABAC), for example granting permissions based on the value of a field in the resource object.

    const App: React.FC = () => {
    <Refine
        // other providers and props
        accessControlProvider={{
            can: async ({ resource, action, params }) => {
                if (resource === "posts" && action === "edit") {
                    return Promise.resolve({
                        can: false,
                        reason: "Unauthorized",
                    });
                }

                // or you can access directly *resource object
                // const resourceName = params?.resource?.name;
                // const anyUsefulOption = params?.resource?.options?.yourUsefulOption;
                // if (resourceName === "posts" && anyUsefulOption === true && action === "edit") {
                //     return Promise.resolve({
                //         can: false,
                //         reason: "Unauthorized",
                //     });
                // }

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

3.48.0

Minor Changes

  • All of the refine packages have dependencies on the @pankod/refine-core package. So far we have managed these dependencies with peerDependencies + dependencies but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)

    Managing as peerDependencies + devDependencies seems like the best way for now to avoid such issues.

Patch Changes

  • Fix adding the current path to the to parameter when redirecting to the login page after logout - #2211

3.47.0

Minor Changes

  • #2217 b4aae00f77 Thanks @omeraplak! - All of the refine packages have dependencies on the @pankod/refine-core package. So far we have managed these dependencies with peerDependencies + dependencies but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)

    Managing as peerDependencies + devDependencies seems like the best way for now to avoid such issues.

3.46.0

Minor Changes

  • Update notification props in data hooks of @pankod/refine-core to cover dynamic notifications.

    Now users will be able to show notifications according to the API response by assigning a function which returns OpenNotificationParams instead of an OpenNotificationParams object.

    Example

    {
    const { mutate } = useCreate({
        /* ... */
        successNotification: (data, values, resource) => ({
            message: data?.message ?? "Success!",
            type: "success",
            description: data?.description;
        }),
        errorNotification: (error, values, resource) => ({
            message: error?.message ?? error?.code ?? "Error!",
            type: "error",
            description: error?.reason;
        })
        /* ... */
    });
}

3.45.0

Minor Changes

  • #2177 5a805c789a Thanks @aliemir! - Update notification props in data hooks of @pankod/refine-core to cover dynamic notifications.

    Now users will be able to show notifications according to the API response by assigning a function which returns OpenNotificationParams instead of an OpenNotificationParams object.

    Example

    {
    const { mutate } = useCreate({
        /* ... */
        successNotification: (data, values, resource) => ({
            message: data?.message ?? "Success!",
            type: "success",
            description: data?.description;
        }),
        errorNotification: (error, values, resource) => ({
            message: error?.message ?? error?.code ?? "Error!",
            type: "error",
            description: error?.reason;
        })
        /* ... */
    });
}

3.44.0

Minor Changes

  • Added ability to compare or filters. This was a missing feature on filters in useTable hook. With this feature, we will prevent or filter bugs (Resolves #2124) such as re-adding the same filters and being unable to modify or filter. To remove or filter with merge behavior, you should pass an empty object as value.

Patch Changes

  • Fix redirection after submit in useForm. Both edit and create will redirect to list (it was edit previously)

    Resolves #2123

3.43.1

Patch Changes

  • #2172 c33d13eb15 Thanks @aliemir! - Fix redirection after submit in useForm. Both edit and create will redirect to list (it was edit previously)

    Resolves #2123

3.43.0

Minor Changes

  • #2164 4d5f6b25e5 Thanks @aliemir! - Added ability to compare or filters. This was a missing feature on filters in useTable hook. With this feature, we will prevent or filter bugs (Resolves #2124) such as re-adding the same filters and being unable to modify or filter. To remove or filter with merge behavior, you should pass an empty object as value.

3.42.0

Minor Changes

  • @pankod/refine-core

    • Added extra params to useSubscription and useResourceSubscription
    • useOne, useMany and useList passed extra params to own subscription hook.

    @pankod/refine-hasura

    • Added liveProvider.

    To see an example of how to use it, check out here.

    @pankod/refine-nhost

    • Added liveProvider.

    To see an example of how to use it, check out here.

    @pankod/refine-graphql

    • Added liveProvider.

Patch Changes

  • Fixed it to appear in menu items even if List is not given in resources #2147

3.41.1

Patch Changes

3.41.0

Minor Changes

  • #2120 2aa7aace52 Thanks @salihozdemir! - ### @pankod/refine-core

    • Added extra params to useSubscription and useResourceSubscription
    • useOne, useMany and useList passed extra params to own subscription hook.

    @pankod/refine-hasura

    • Added liveProvider.

    To see an example of how to use it, check out here.

    @pankod/refine-nhost

    • Added liveProvider.

    To see an example of how to use it, check out here.

    @pankod/refine-graphql

    • Added liveProvider.

3.40.0

Minor Changes

  • Add a simple and transparent telemetry module to collect usage statistics defined within a very limited scope.

    Tracking is completely safe and anonymous. It does not contain any personally identifiable information and does not use cookies. Participation is optional and users can opt out easily.

    For more information, you can check the documentation.

3.39.0

Minor Changes

  • #2078 868bb943ad Thanks @yildirayunlu! - Add a simple and transparent telemetry module to collect usage statistics defined within a very limited scope.

    Tracking is completely safe and anonymous. It does not contain any personally identifiable information and does not use cookies. Participation is optional and users can opt out easily.

    For more information, you can check the documentation.

3.38.2

Patch Changes

    • The redirect method that return from useForm updated to be avaiable for passing id.
    const { redirect } = useForm();

redirect("edit", id);
    • Returning API response to onFinish function for successful mutations

3.38.1

Patch Changes

  • #2089 ee8e8bbd6c Thanks @ozkalai! - - The redirect method that return from useForm updated to be avaiable for passing id.

    const { redirect } = useForm();

redirect("edit", id);
    • Returning API response to onFinish function for successful mutations

3.38.0

Minor Changes

  • useLog is converted to useQuery mutation.

    // before
const { log } = useLog();
log({
  resource: 'posts',
  action: 'create',
  data: {
      id: 1
  }
});

    // after
const { log } = useLog();
const { mutation } = log;
mutation({
  resource: 'posts',
  action: 'create',
  data: {
      id: 1
  }
});

Patch Changes

  • Fixed useBreadcrumb hook throws console.warn even if i18nProvider is not used - #2103

3.37.0

Minor Changes

  • #2049 98966b586f Thanks @yildirayunlu! - useLog is converted to useQuery mutation.

    // before
const { log } = useLog();
log({
  resource: 'posts',
  action: 'create',
  data: {
      id: 1
  }
});

    // after
const { log } = useLog();
const { mutation } = log;
mutation({
  resource: 'posts',
  action: 'create',
  data: {
      id: 1
  }
});

Patch Changes

  • #2104 9d77c63a92 Thanks @omeraplak! - Fixed useBreadcrumb hook throws console.warn even if i18nProvider is not used - #2103

3.36.0

Minor Changes

  • Ability to disable server-side pagination on useTable and useList hooks.

    Implementation

    Added hasPagination property to useTable to enable/disable pagination. Updated useList config with no pagination option. Set hasPagination to false to disable pagination. useTable hook uses the useList hook under the hood and propagates the hasPagination property to it. Also setting pagination related return values to undefined for better type check on the user side.

    Use Cases

    In some data providers, some of the resources might not support pagination which was not supported prior to these changes. To handle the pagination on the client-side or to disable completely, users can set hasPagination to false.

Patch Changes

  • Added actions translate support for CRUD operations (list,create,edit,show) in the useBreadcrumb useBreadcrumb hook.

    #️⃣ First, We need to add the actions key to the translation file.

        "actions": {
        "list": "List",
        "create": "Create",
        "edit": "Edit",
        "show": "Show"
    },

    #️⃣ If you don't provide the actions key, useBreadcrumb will try to find the buttons key in the translation file for backward compatibility.

        "buttons": {
        "list": "List",
        "create": "Create",
        "edit": "Edit",
        "show": "Show"
    },

    🎉 You can check the code part of this pull request to see how it works here👇🏼

    const key = `actions.${action}`;
const actionLabel = translate(key);
if (actionLabel === key) {
    console.warn(
        `Breadcrumb missing translate key for the "${action}" action. Please add "actions.${action}" key to your translation file. For more information, see https://refine.dev/docs/core/hooks/useBreadcrumb/#i18n-support`,
    );
    breadcrumbs.push({
        label: translate(`buttons.${action}`, humanizeString(action)),
    });
} else {
    breadcrumbs.push({
        label: translate(key, humanizeString(action)),
    });
}

3.35.0

Minor Changes

  • #2050 635cfe9fdb Thanks @ozkalai! - Ability to disable server-side pagination on useTable and useList hooks.

    Implementation

    Added hasPagination property to useTable to enable/disable pagination. Updated useList config with no pagination option. Set hasPagination to false to disable pagination. useTable hook uses the useList hook under the hood and propagates the hasPagination property to it. Also setting pagination related return values to undefined for better type check on the user side.

    Use Cases

    In some data providers, some of the resources might not support pagination which was not supported prior to these changes. To handle the pagination on the client-side or to disable completely, users can set hasPagination to false.

Patch Changes

  • #2069 ecde34a9b3 Thanks @biskuvit! - Added actions translate support for CRUD operations (list,create,edit,show) in the useBreadcrumb useBreadcrumb hook.

    #️⃣ First, We need to add the actions key to the translation file.

        "actions": {
        "list": "List",
        "create": "Create",
        "edit": "Edit",
        "show": "Show"
    },

    #️⃣ If you don't provide the actions key, useBreadcrumb will try to find the buttons key in the translation file for backward compatibility.

        "buttons": {
        "list": "List",
        "create": "Create",
        "edit": "Edit",
        "show": "Show"
    },

    🎉 You can check the code part of this pull request to see how it works here👇🏼

    const key = `actions.${action}`;
const actionLabel = translate(key);
if (actionLabel === key) {
    console.warn(
        `Breadcrumb missing translate key for the "${action}" action. Please add "actions.${action}" key to your translation file. For more information, see https://refine.dev/docs/core/hooks/useBreadcrumb/#i18n-support`,
    );
    breadcrumbs.push({
        label: translate(`buttons.${action}`, humanizeString(action)),
    });
} else {
    breadcrumbs.push({
        label: translate(key, humanizeString(action)),
    });
}

3.34.2

Patch Changes

  • Fixed useImport onFinish twice call bug.

3.34.1

Patch Changes

3.34.0

Minor Changes

  • Export RefineProps and ResourceProps type.

Patch Changes

  • We have fixed texts with translations of default login pages in Material UI and Headless.

3.33.0

Minor Changes

Patch Changes

  • #2029 b257d87fef Thanks @ozkalai! - We have fixed texts with translations of default login pages in Material UI and Headless.

3.32.0

Minor Changes

  • Add useMenu hook to @pankod/refine-core

Patch Changes

  • Add custom route support to defaultOpenKeys in useMenu
  • Handle the undefined case at audit-log logger in data hooks.
  • Remove dashboard item in useMenu hook

3.31.0

Minor Changes

Patch Changes

3.30.0

Minor Changes

  • Add useMenu hook to @pankod/refine-core

Patch Changes

  • Add custom route support to defaultOpenKeys in useMenu
  • Handle the undefined case at audit-log logger in data hooks.

3.29.2

Patch Changes

  • Fix hook-inside-hook call in notificationProvider setup at <Refine/>

3.29.1

Patch Changes

3.29.0

Minor Changes

  • Updated notificationProvider prop in the Refine wrapper component to be able to lazily initialized.

3.28.0

Minor Changes

  • Updated notificationProvider prop in the Refine wrapper component to be able to lazily initialized.

3.27.0

Minor Changes

  • Updated notificationProvider prop in the Refine wrapper component to be able to lazily initialized.

3.26.0

Minor Changes

  • #1896 2ba2a96fd2 Thanks @aliemir! - Updated notificationProvider prop in the Refine wrapper component to be able to lazily initialized.

3.23.2

Patch Changes

  • #1873 2deb19babf Thanks @aliemir! - Removed dummy default values from internal contexts. Updated contexts:

    • Auth
    • Access Control
    • Notification
    • Translation (i18n)
    • unsavedWarn

    BREAKING: useGetLocale hook now can return undefined instead of a fallback value of en in cases of i18nProvider being undefined.

3.23.1

Patch Changes

3.23.0

Minor Changes