fair-rose
fair-rose•3y ago

How to transform query results before passing them to `useForm`?

My api returns a JSON string in one of its endpoints. Something like this 
{
  list: "[{id: 1}, {id: 2}]"
}
{
  list: "[{id: 1}, {id: 2}]"
}
I use this field with react-hook-form's useFieldArray to show an array of input fields to edit each list item. 
  const {
    fields,
    append,
    remove,
  } = useFieldArray({
    control,
    name: "list",
  });
  const {
    fields,
    append,
    remove,
  } = useFieldArray({
    control,
    name: "list",
  });
but because list is a string and not an array it doesn't work. What's the best way to convert list to JSON before useForm hook use it? I'm trying to avoid updating my data providers as much as possible because they are already messy. Is there any way to achieve this without updating data providers?
3 Replies
Omer
Omer•3y ago
Hey @amirhhashemi 👋, You can use queryOptions.select property of useForm hook⚡️
Omer
Omer•3y ago
fair-rose
fair-roseOP•3y ago
Oh that's neat. Thank you so much For anyone else who has the same problem, you should do this: 
useForm({
    refineCoreProps: {
      queryOptions: {
        select: (data) => {
          const transformed = /* transform data */
          return transformed;
        },
      },
    },
  });
useForm({
    refineCoreProps: {
      queryOptions: {
        select: (data) => {
          const transformed = /* transform data */
          return transformed;
        },
      },
    },
  });

Did you find this page helpful?