Thanks @TkDodo for your help. Indeed, since I do not want to change refetchInterval value, the solution here does not bring anything more than the cancelQueries in my usecase :).
But still useful :D

1/ Is it a good pattern according to my constraints with backend cache ?

I think cancelling queries before writing to the cache is a good practice - all the examples do that with optimistic updates.

2/ Is there a way to "reset" therefetchInterval so that it restarted after my update?

controlling a query can always be done with local state:

const useMyQuery = () => {
  const [refetchInterval, setRefetchInterval] = React.useState(10 * ONE_SECOND)
  return useQuery('key', fetchFn, { refetchInterval, onSuccess: (data) => setRefetchInterval(data.something) }
}

by setting the refetchInterval to a value depending on the data in onSuccess (0 if you want to turn it off), you'll re-render your component and the queryOptions update accordingly.

@TkDodo now that onSuccess is deprecated what pattern do you recommend in turning off the interval?

refetchInterval can be a function that receives the latest query. Just return 0 and remove your state ;)

However, after returning 0 (or false) from the refetchInterval function, is there anyway to restart it (thinking specifically in Vue)? I've noticed that after returning false once, it doesn't appear to be checked again 🤷. Or I am perhaps missing something? 😅

the function will re-run every time the component re-renders.