Features
-
- The swizzle is a command in refine-cli that allows you to customize the Refine's supported components and data providers. It allows you to eject selected files from the Refine packages and modify depending on your needs.
- Refer to Swizzle Docs for more information
Swizzleable components:
- Authenticated
- CanAccess
- ErrorPage
- Authentication Pages
- Login
- Logout
- Register
- ForgotPassword
- UpdatePassword
-
@pankod/refine-inferenceris a package that provides a way to automatically generate views for resources based on the data structure.- Refer to Inferencer Docs for more information
-
0767d7a07a7Thanks @yildirayunlu! - Added theuseInfiniteListhook 🥳. This hook is a modified version of react-query'suseInfiniteQueryused for retrieving items from a resource with pagination, sort, and filter configurations. -
#3324
9bfb34749bcThanks @aliemir! - Added the ability to pass mutation options touseMutationhooks 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)
-
#3442
8f2954611faThanks @salihozdemir! - Added swizzle support for@pankod/refine-corepackage.Swizzleable components:
AuthenticatedCanAccessErrorPage- Authentication Pages
LoginLogoutRegisterForgotPasswordUpdatePassword
-
#3140
102bfbf3283Thanks @aliemir! - - Bumped Next.js to 13- Added support for experimental
appDiroption innext.config.jsto allow for the latest Next.js features.
Current support for
pagesdirectory has not changed and will continue to work as before. It will be supported as long asNext.jscontinues to support and prompts it as the stable way of working withNext.js.appDiroption is a new experimental feature inNext.jsthat introduces a bunch of new features. It is currently in beta and is not stable. It is not recommended to use it in production. But can be used alongside the currentpagesdirectory support.To use
appDiroption, you need to add it to yournext.config.jsfile.// next.config.js module.exports = { /* ... */ experimental: { appDir: true, }, };
We've needed to make some changes to the
@pankod/refine-nextjs-routerto make it work with the current structure of theappdirectory feature. To make sure these do not break the current support forpagesdirectory, we've added a new exports at the sub path@pankod/refine-nextjs-router/appthat can be used with theappDiroption.Note
To make optional catch-all routes to work with the
appdirectory, you need to define them as directories unlike the option of defining them as files withpagesdirectory.You need to use
NextRouteComponentfrom@pankod/refine-nextjs-router/appinstead ofNextRouteComponentfrom@pankod/refine-nextjs-routerwhen usingappDiroption.Inside your
layoutfile, you need to bindparamstorouterProviderto make sure@pankod/refine-nextjs-routercan work properly with the new structure.// app/[[...refine]]/layout.tsx "use client"; import routerProvider from "@pankod/refine-nextjs-router/app"; const Layout = ({ children, params }) => { return ( <Refine routerProvider={routerProvider.apply({ params })} /* ... */ > {children} </Refine> ); };
Warning
Please note that, unlike the
routerProviderfrom the@pankod/refine-nextjs-router,routerProviderfrom@pankod/refine-nextjs-router/appis a function and you need to bindparamsto make it work properly.// app/[[...refine]]/page.tsx "use client"; import { NextRouteComponent } from "@pankod/refine-nextjs-router/app"; export default NextRouteComponent;
Warning
You need to add
"use client";directive to bothlayout.tsxandpage.tsxinsideapp/[[...refine]]directory.Warning
checkAuthenticationdoes not work withappDir. We're aiming to release a substitute for it using middleware but for now its not included in this release. - Added support for experimental
- #3436
ea74f3a8408Thanks @sevkioruc! - Fix useList, useCustom and useCustomMutation hooks i18n issue in the error messages. - #3440
96d93eb2d71Thanks @salihozdemir! - Made the auth provider'susePermissionsmethod optional. - #3436
ea74f3a8408Thanks @sevkioruc! - Fix useList, useCustom and useCustomMutation hooks i18n issue in the error messages. - #3440
96d93eb2d71Thanks @salihozdemir! - Made the auth provider'susePermissionsmethod optional. - #3324
9bfb34749bcThanks @aliemir! - Added the ability to pass mutation options touseMutationhooks in mutation hooks:useFormuseStepsFormuseModalFormuseDrawerForm
@pankod/refine-codemod package handles the breaking changes for your project automatically, without any manual steps. It migrates your @pankod/refine-antd version 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 @pankod/refine-codemod antd4-to-antd5And it's done. Now your project uses @pankod/refine-antd@4.x.x.