Query data and fill a form with that data

[ebisbe]

I'm trying to fill an Edit form with that from the vue-query. Should I use a watch to see when the { data } is not undefined and copy that information to a new property? I've been searching info about how should be done but I haven't find anything relevant.

[DamianOsipiuk]

That depends on what UX you want to achieve and what form would you use (library or native elements).
Basically you have to options:

• use v-if to check when data is available and display some fallback otherwise, like a spinner (similar to examples)
• use computed to get data or fallback if data is empty, like empty object. Then you can just use computed value in the template without v-if

[DamianOsipiuk]

Yes, values returned by the query are immutable, so you would not be able to mutate the cache state and that is by design.
In this case you should clone deep the data inside computed compostable and pass returned value to your form.

[ebisbe]

I tried to use a watch but could not making it work. There are no events that fire onSuccess if I use

export function useTodoQuery(todoId, { enabled }) {
  return useQuery(
    ["todos", todoId],
    () => axios.get(`/todos/${todoId.value}`),
    {
      enabled,
      select: (todo) => todo.data,
    }
  );
}

right?
I saw that there is one in the useQuery but thats not returned.

[DamianOsipiuk]

I was thinking about something like:

const { data } = useTodoQuery(...)
// This is only for storage purpose
const newData = ref()
const formData = computed(() => {
    // if you already have something changed in the form
    // This will also prevent data loss when additional fetch happens when user is filling the form as it would not be overridden
    if (newData.value) {
      return newData.value;
    }
    // if form is pure and query already has data, copy it as a formData
    if (data.value) {
      // cloneDeep here to prevent mutations on nested objects
      newData.value = cloneDeep(data.value)
      return newData.value;
    }
    // if there is no data yet
    return {}
})

Playground

[ebisbe]

it throws a // eslint-disable-next-line vue/no-side-effects-in-computed-properties but works. So thanks

[DamianOsipiuk]

You could also try something like this with watch which should not produce an error: Playground