Using onSuccess with select in custom hooks

[cwhenderson20]

I'm facing a question of best practice with running side effects from the onSuccess handler of a query when that query is used as a base for "derived" queries.

Here's an example of the setup I'm describing:

function useCharacters<SelectedData = Data>(
  options?: Omit<
    UseQueryOptions<
      Data,
      unknown,
      SelectedData,
      ReturnType<typeof queryKeys.characters>
    >,
    'queryKey' | 'queryFn'
  >
) {
  return useQuery(
    queryKeys.characters,
    async () => {
      // api request
    },
    {
      ...options,
      onSuccess: callAll(config?.onSuccess, (data) => {
        runSideEffect(data)
      })
    }
  );
}

function useCharacter(characterId: number) {
  return useCharacters({
    select: (data) => data.find((character) => character.id === characterId),
  });
}

By design, onSuccess receives the data returned from select, which means that the side effect function will receive different data depending on which derived query runs.

A quick and dirty solution (or maybe it's the recommended way?) would be to manually select out the full data in the main onSuccess handler, and then act on that:

// ...
onSuccess: callAll(config?.onSuccess, () => {
  const queryData = queryClient.getQueryData(queryKeys.characters);
  runSideEffect(queryData)
})

An alternative solution might be to set up a custom hook that "listens" for that query's data changing and runs the side effect when it does.

My question is: are either of the two proposed solutions good practice, or am I thinking about this problem in the wrong way? Or does it make any sense to update React Query such that the "unmodified" data gets passed to onSuccess as a second parameter?

Thank you!

[TkDodo]

onSuccess will run one time for each useQuery instance (=observer), and for each one, it will get the observer specific data, which is the one it gets from select.

Now if you have two observers with different select outputs, I'm having a hard time coming up with a side-effect that should be run twice after a fetch, but with the same original / full data 🤔

If your intention is to only run the side-effect once per fetch, have a look at the global queryCache callbacks.

[cwhenderson20]

Thanks for the answer @TkDodo (and thank you for all you do for this project; your blog posts have been indispensable!) My intention is definitely to run once per fetch, but the side effect in question is idempotent, so I was ignoring the "over" running for simplicity's sake. I hadn't considered the global callbacks for this use case, though I'm not totally sold that it leads to the cleanest solution for several reasons:

1. It means our setup wrapper (where we create the QueryCache) would have to depend on any number of modules that might want to use this type of side effect paradigm. Alternatively, I could roll my own registry to maintain independence from the modules, but that feels like overkill.
2. The global onSuccess handler seems more attuned to doing something generic with all responses rather than something specific with one (or many). There will have to be custom logic in order to link the query key (which may have some slight variations depending on parameters, for example) with whether or not a given side effect should run.

Assuming I didn't use the global callbacks, and that I might prefer at some point to run the side effect once per fetch rather than once per observer, does a custom useEffect-based hook that listens for the query data changing seem like a sane option?

[TkDodo]

The global onSuccess handler seems more attuned to doing something generic with all responses rather than something specific with one (or many).

That's true. A good way to bypass is this is to use the meta field to maybe tell the global handler if it should run the side-effect, or what it should pass to it. This could then be customized on a per-query basis, keeping the global logic quite minimal.

Assuming I didn't use the global callbacks, and that I might prefer at some point to run the side effect once per fetch rather than once per observer, does a custom useEffect-based hook that listens for the query data changing seem like a sane option?

definitely. it would work a bit different if you have staleTime, because data can change even though you didn't fetch it, e.g. because it was only returned from the cache. If your intention is to run something "whenever data changes", the useEffect resembles that better anyhow :)

[cwhenderson20]

Excellent! Thank you again for the guidance. I really appreciate it.