inland-turquoise

Overwriting defaultValues from React Hook Form with data from useQuery

Hello, I am having trouble mixing useQuery from React Query together with React Hook Form

const { data, isLoading } = useQuery<AddEventFormData>(
    ["eventDetails"],
    () => getEventBySlug(id),
    {
      enabled: id.length > 0,
    }
  );

  const eventDetailsToEdit = useMemo(() => {
    if (isLoading) {
      return {};
    }

    return {
      name: data?.name,
      tags: data?.tags,
      timezone: data?.timezone,
      description: data?.description,
      locationType: data?.location.location_type,
      sections: [],
      category: null,
      mainImage: undefined,
      additionalImages: [],
      path: "",
      startTime: undefined,
      endTime: undefined,
      maxTicketsPerOrder: 0,
    };
  }, [data, isLoading]);

  const methods = useForm<AddEventFormData>({
    resolver: zodResolver(eventSchema),
    // mode: "onChange",
    defaultValues: {
      name: "",
      sections: [],
      tags: [],
      timezone: null,
      description: "",
      category: null,
      mainImage: undefined,
      additionalImages: [],
      locationType: "live",
      currency: "",
      path: "",
      startTime: undefined,
      endTime: undefined,
      maxTicketsPerOrder: 0,
      ...eventDetailsToEdit,
    },
  });

const { data, isLoading } = useQuery<AddEventFormData>(
    ["eventDetails"],
    () => getEventBySlug(id),
    {
      enabled: id.length > 0,
    }
  );

  const eventDetailsToEdit = useMemo(() => {
    if (isLoading) {
      return {};
    }

    return {
      name: data?.name,
      tags: data?.tags,
      timezone: data?.timezone,
      description: data?.description,
      locationType: data?.location.location_type,
      sections: [],
      category: null,
      mainImage: undefined,
      additionalImages: [],
      path: "",
      startTime: undefined,
      endTime: undefined,
      maxTicketsPerOrder: 0,
    };
  }, [data, isLoading]);

  const methods = useForm<AddEventFormData>({
    resolver: zodResolver(eventSchema),
    // mode: "onChange",
    defaultValues: {
      name: "",
      sections: [],
      tags: [],
      timezone: null,
      description: "",
      category: null,
      mainImage: undefined,
      additionalImages: [],
      locationType: "live",
      currency: "",
      path: "",
      startTime: undefined,
      endTime: undefined,
      maxTicketsPerOrder: 0,
      ...eventDetailsToEdit,
    },
  });

The eventDetailsToEdit is supposed to reset the empty values, but I keep getting an error value is undefined in the browser, however, on older tabs I have open on the page, the spread operator does what it's supposed to, I am assuming it's due to cache, however when refreshing the same error pops up

11 Replies

genetic-orange•3y ago

Hi 👋 Please could you provide a runnable minimal reproducible example? I'm happy to take a look at this for you but I'm not an avid React Hook Form user, so it'd be easier if I could look at the bigger picture and test things 🙂

inland-turquoiseOP•3y ago

I guess I could paste the entire file, it won't work due to dependencies and missing server data, would that be useful?

genetic-orange•3y ago

A runnable example like a Code Sandbox would be ideal. I can't run your file on its own so it wouldn't be much help unfortunately Equally, feel free to wait and see if someone who's used both of these libraries in conjunction with each other sees this and notices anything immediately obvious

inland-turquoiseOP•3y ago

Ah, there's too much in that case, unfortunately

genetic-orange•3y ago

A minimal reproducible example is exactly what the name suggests. In this case, you'd need a query with a query function that resolves to some data, and a form with a field or two via React Hook Form. It's up to you 🙂

inland-turquoiseOP•3y ago

I will try to do that once I get home, it was always puzzling to me how server data is reproduced to a sandbox, though I assume it's changed to use dummy data

genetic-orange•3y ago

You can just return a Promise that resolves to whatever you want to mock You don't need to make network requests or anything like that

inland-turquoiseOP•3y ago

Sorry for the late response, I am facing the same issue in the sandbox 😄 https://codesandbox.io/s/jovial-platform-klgtkn?file=/src/App.js:1003-1005 The idea was to spread the data object, which would overwrite the empty values, however, that doesn't seem to work, but I don't know why

genetic-orange•3y ago

you need to use values instead of defaultValues: https://react-hook-form.com/api/useform/

useForm

Performant, flexible and extensible forms with easy-to-use validation.

genetic-orange•3y ago

but also read about resetOptions

genetic-orange•3y ago

it was introduced in 7.41.0 to better introp with async state managers: https://github.com/react-hook-form/react-hook-form/releases/tag/v7.41.0

GitHub

Release 🎄 Version 7.41.0 · react-hook-form/react-hook-form

👉 NEW values props The following syntax will react to values prop update/changes. values will be reactive to update/change and reset accordingly provide a reset option to keep dirty/touched values...

Gaming

Programming

Overwriting defaultValues from React Hook Form with data from useQuery

Did you find this page helpful?