xenial-black•3w ago

Weird edit() behaviour

Hi all, I'm experiencing a weird behaviour if I set an EDIT path for a resource, as soon as I go to that path the system is automatically trying to load the resource as [my_api]/resource/ID both with a GET and OPTION request but I'm not actually adding any of those in my code... is that an automated behaviour? how can I disable it?

6 Replies

kapa.ai•3w ago

Hi @simoneb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, this is an automated behavior in refine. When you navigate to an edit path for a resource, refine automatically tries to fetch the data for that resource using the ID from the URL. This is part of refine's convention-based approach to simplify common CRUD operations. This behavior is implemented in the useForm hook, which is typically used in edit pages. The hook automatically makes a GET request to fetch the resource data when it mounts. According to the Github issue #1260:

When using useForm or useModalForm on resource A in the Show context of resource B - a GET request is being performed to resource A with the ID of shown resource B.

If you want to disable this automatic data fetching, you have a few options: 1. Use the queryOptions prop of useForm to disable the automatic query:

const { formProps } = useForm({
  queryOptions: {
    enabled: false,
  },
});

const { formProps } = useForm({
  queryOptions: {
    enabled: false,
  },
});

2. If you're using the <Edit> component, you can pass the queryOptions prop to it:

<Edit queryOptions={{ enabled: false }}>
  {/* ... */}
</Edit>

<Edit queryOptions={{ enabled: false }}>
  {/* ... */}
</Edit>

3. If you need more control over when and how the data is fetched, you might consider using useForm with manual mode and handling the data fetching yourself. Remember that disabling this automatic behavior means you'll need to handle data fetching manually if you still need the resource data in your edit form. For more detailed information about the useForm hook and its options, you can refer to the refine documentation on useForm. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@539513465103056900> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

xenial-blackOP•3w ago

If I try I'm getting an error Object literal may only specify known properties, and 'queryOptions' does not exist in type 'UseFormProps<BaseRecord, HttpError, FieldValues, {}, BaseRecord, BaseRecord, HttpError>' @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. It seems the error you're encountering is related to the type definition of UseFormProps. Let's clarify this based on the current refine documentation. According to the refine documentation on useForm, the queryOptions property should be nested under the refineCoreProps object when using @refinedev/react-hook-form. Here's the correct way to disable the automatic query:

const { formProps } = useForm({
  refineCoreProps: {
    queryOptions: {
      enabled: false,
    },
  },
});

const { formProps } = useForm({
  refineCoreProps: {
    queryOptions: {
      enabled: false,
    },
  },
});

This structure is confirmed in the documentation for queryOptions:

useForm({  
  refineCoreProps: {  
    queryOptions: {  
      retry: 3,  
    },  
  },  
});

useForm({  
  refineCoreProps: {  
    queryOptions: {  
      retry: 3,  
    },  
  },  
});

The error you're seeing suggests that you're trying to pass queryOptions directly to useForm, which is not correct for the @refinedev/react-hook-form package. If you're using a different package or version, please let me know, and I can provide more specific guidance. Remember, this approach will only work in edit or clone mode, as mentioned in the documentation:

Works only in action: "edit" or action: "clone" mode.

If you're still encountering issues after making this change, please provide more details about your setup, including the exact version of refine and the package you're using for forms. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@539513465103056900> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

xenial-blackOP•3w ago

great, it is actually working, thanks

Weird edit() behaviour

Did you find this page helpful?