T
TanStack•2y ago
national-gold

onSuccess analogue in queries?

Hello, I am migrating from v4 to v5, using vue. I can't figure out how I can do same in v5? 
const backupsQueries = computed(() =>
  [...expandedIds].map((id) => ({
    queryKey: ['backups', id],
    queryFn: () => getBackups(id).then((data) => data.backups),
    // how to do same in v5?
    onSuccess: (data: Backup[]) => {
      backups.set(id, data);
    },
    placeholderData: keepPreviousData,
  })),
);
const backupsQueries = computed(() =>
  [...expandedIds].map((id) => ({
    queryKey: ['backups', id],
    queryFn: () => getBackups(id).then((data) => data.backups),
    // how to do same in v5?
    onSuccess: (data: Backup[]) => {
      backups.set(id, data);
    },
    placeholderData: keepPreviousData,
  })),
);
6 Replies
solid-orange
solid-orange•2y ago
seems like you'r copying data to some store? why is that necesssary ?
national-gold
national-goldOP•2y ago
I have a list of instances, each instance has backups list (should fetch from api /instances/:id/backups). So I stored backups for each instance in new Map(). Also I should fetch backups for instance only if it's open (user click on button "show backups") Probably I can just track list of instances that need backups, and then just render result of useQueries right?
solid-orange
solid-orange•2y ago
yes
probable-pink
probable-pink•2y ago
To circle back on this, if i want to set values of @tanstack/form based on an API call that i get from a useQuery call. What would be the way?
solid-orange
solid-orange•2y ago
from within the query function but I wouldn't recommend it. please read: https://tkdodo.eu/blog/react-query-and-forms
React Query and Forms
Forms tend to blur the line between server and client state, so let's see how that plays together with React Query.
probable-pink
probable-pink•2y ago
In my use case I have a form that can be empty, or it can be populated by selecting a value from a combobox component. Upon selecting that, a useQuery(['data', newValue]) query is invoked and then if it exists it sets some of the values that are present, if not, fields remain untouched. So it seems like splitting up the components is the more correct way to do this, and then having a listener for the data property which can be undefined in which case the form fields will get reset/set to empty.

Did you find this page helpful?