subsequent-cyan•12mo ago

Refine React hook form useForm hook not using the proper resource path unless specified manually

Hello, useForm from @refinedev/react-hook-form doesn't seem to be detecting the route path and it keep using resource name unless I specify resource manually. I am not sure what I am doing wrong, below are the screenshots of my project

9 Replies

kapa.ai•12mo ago

Hi @Cavdy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but as an AI, I'm unable to view screenshots or other images. However, I can provide some guidance based on the information you've provided. The useForm hook in Refine uses the resource parameter to determine the API endpoint path. By default, it reads the resource value from the current URL. If the resource is passed, the id from the current URL will be ignored because it may belong to a different resource. To retrieve the id value from the current URL, you can use the useParsed hook and pass the id value to the useForm hook. Here's an example of how you can do this:

import { useParsed } from "@refinedev/core";  
import { useForm } from "@refinedev/react-hook-form";  
  
const { id } = useParsed();  
  
useForm({  
 refineCoreProps: {  
 resource: "custom-resource",  
 id,  
 },  
});

import { useParsed } from "@refinedev/core";  
import { useForm } from "@refinedev/react-hook-form";  
  
const { id } = useParsed();  
  
useForm({  
 refineCoreProps: {  
 resource: "custom-resource",  
 id,  
 },  
});

If you're using a router integration, Refine should be able to infer the resource, action, and id from the current route and provide them to the useForm hook. This should prevent the need for passing explicit resource, action, and id props to the hooks including useForm.

import { useForm } from "@refinedev/core";  
  
useForm({  
 // These properties will be inferred from the current route  
 resource: "posts",  
 action: "edit",  
 id: 1,  
});

import { useForm } from "@refinedev/core";  
  
useForm({  
 // These properties will be inferred from the current route  
 resource: "posts",  
 action: "edit",  
 id: 1,  
});

If you're still having issues, it would be helpful to know more about your current setup and the specific problem you're encountering. For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form#resource) and the Refine Github issues (https://github.com/refinedev/refine/issues/3726) for similar problems and solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@425445331950632970> kapa.ai is still learning and improving, please let us know how it did by reacting below

subsequent-cyanOP•12mo ago

@kapa.ai passing the resource manually works, but does it mean that refine router can't read the current url when using refine react hook form? @kapa.ai any reason why useForm doesn't detect current url automatically?

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useForm hook in Refine is designed to infer the resource, action, and id from the current route when a router integration is made. This is to provide them to the useForm hook and prevent the need for passing explicit resource, action, and id props to the hooks including useForm.

import { useForm } from "@refinedev/core";  
  
useForm({  
 // These properties will be inferred from the current route  
 resource: "posts",  
 action: "edit",  
 id: 1,  
});

import { useForm } from "@refinedev/core";  
  
useForm({  
 // These properties will be inferred from the current route  
 resource: "posts",  
 action: "edit",  
 id: 1,  
});

(Source: Refine Documentation (https://refine.dev/docs/guides-concepts/forms#integration-with-routers)) However, there could be several reasons why useForm might not be detecting the current URL automatically: 1. Router Integration: If you haven't integrated a router, useForm won't be able to infer the resource, action, and id from the current route. Make sure you have a router integration in place. 2. Custom Routes: If you're using custom routes that don't follow the standard Refine resource/action/id pattern, useForm might not be able to correctly infer the necessary values. 3. Explicit Props: If you're passing explicit resource, action, and id props to useForm, these will override any values inferred from the route. If you're still having issues, it would be helpful to review your router setup and any custom routes you might be using. You can also check the Refine documentation (https://refine.dev/docs/guides-concepts/forms#integration-with-routers) for more information on how useForm works with routers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@425445331950632970> kapa.ai is still learning and improving, please let us know how it did by reacting below

subsequent-cyanOP•12mo ago

@kapa.ai I am using nextjs pages and I have nextjs router provider but it still doesn't detect current url. Note I didn't configure the setup myself, it is an example setup from create refine

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're using Next.js with Refine and the useForm hook isn't detecting the current URL automatically, it could be due to a few reasons. Firstly, ensure that you have installed the @refinedev/nextjs-router package. This package provides easy integration between Refine and Next.js. You can install it using npm, pnpm, or yarn:

npm i @refinedev/nextjs-router

npm i @refinedev/nextjs-router

(Source: Refine Documentation (https://refine.dev/docs/routing/integrations/next-js)) Secondly, if you're using the legacy router provider, it can be imported from @refinedev/nextjs-router/legacy for the /pages directory and @refinedev/nextjs-router/legacy-app for the /app directory and passed to the legacyRouterProvider prop of the Refine component. If you're still having issues, it would be helpful to review your router setup and any custom routes you might be using. You can also check the Refine documentation (https://refine.dev/docs/routing/integrations/next-js) for more information on how useForm works with Next.js. If the issue persists, it might be a good idea to raise an issue on the Refine GitHub repository (https://github.com/pankod/refine/issues) with a detailed description of your problem and the steps to reproduce it. The maintainers or the community might be able to provide more specific help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@425445331950632970> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•12mo ago

Hello again @Cavdy The discussion about this issue continues on github 👍 https://github.com/refinedev/refine/issues/5594

Refine React hook form useForm hook not using the proper resource path unless specified manually

Did you find this page helpful?