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•2y ago

Hey @amirhhashemi 👋, You can use queryOptions.select property of useForm hook⚡️

Omer•2y ago

https://tanstack.com/query/v4/docs/reference/useQuery

useQuery | TanStack Query Docs

const { data,

continuing-cyan•2y 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;
        },
      },
    },
  });