Revision history [back]

Both the select and onSuccess options are used with useQuery in Tanstack Query to customize the data returned by the query.

The select option is used to select specific fields from the data returned by the query. This reduces the amount of data returned and can improve performance. For example:

const { isLoading, data } = useQuery('users', fetchUsers, {
  select: (data) => data.map(({ id, name }) => ({ id, name })),
});

In this example, the select option is used to only return the id and name fields from the data returned by the fetchUsers function.

The onSuccess option is used to specify a function that will be called when the query successfully completes. This function has access to the data returned by the query and can be used to perform additional logic. For example:

const { isLoading, data } = useQuery('users', fetchUsers, {
  onSuccess: (data) => console.log(`Fetched ${data.length} users`),
});

In this example, the onSuccess option is used to log the number of users returned by the fetchUsers function when the query successfully completes.