optimistic-gold•2w ago

useForm redirection

I want to prevent redirection when there is a validation error from the API but it keeps redirecting to / even with refineCoreProps: { redirect: false, action: 'create', }, How can I prevent redirection?

2 Replies

kapa.ai•2w ago

Hi @luismvl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To prevent redirection when there's a validation error from the API using useForm in refine, you can use the redirect: false option. However, it seems that you're still experiencing redirection despite setting this option. Let's explore a few potential solutions: 1. Ensure you're using the correct property structure:

const {
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    redirect: false,
    action: 'create',
  },
});

const {
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    redirect: false,
    action: 'create',
  },
});

Make sure you're passing these options correctly to the useForm hook as shown in the documentation (https://refine.dev/docs/packages/react-hook-form/use-form/#redirect). 2. Check if you have any global redirect settings: It's possible that you have a global redirect setting in your <Refine> component that's overriding your local setting. Check your <Refine> component configuration and ensure you don't have any conflicting redirect settings as mentioned in the Refine component documentation (https://refine.dev/docs/core/refine-component/#redirect). 3. Use mutationMode: "pessimistic": If you're still experiencing issues, you can try setting the mutationMode to "pessimistic". This ensures that the redirect only happens after the API call is successful:

const {
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    redirect: false,
    action: 'create',
    mutationMode: "pessimistic",
  },
});

const {
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    redirect: false,
    action: 'create',
    mutationMode: "pessimistic",
  },
});

4. Handle redirection manually: If none of the above solutions work, you can handle the redirection manually using the onMutationSuccess callback:

const {
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    redirect: false,
    action: 'create',
    onMutationSuccess: (data, variables, context) => {
      // Check for validation errors here
      // Only redirect if there are no errors
      if (!data.validationErrors) {
        // Perform your redirection here
      }
    },
  },
});

const {
  // ... other destructured properties
} = useForm({
  refineCoreProps: {
    redirect: false,
    action: 'create',
    onMutationSuccess: (data, variables, context) => {
      // Check for validation errors here
      // Only redirect if there are no errors
      if (!data.validationErrors) {
        // Perform your redirection here
      }
    },
  },
});

This approach gives you full control over when and where to redirect based on the API response. If you're still experiencing issues after trying these solutions, it might be helpful to check for any custom configurations or middleware in your application that could be affecting the redirection behavior. Additionally, ensure that you're using the latest version of refine, as bug fixes and improvements are regularly released. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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