useUtils vs useQueryClient

const queryClient = useQueryClient();
const services = api.list.services({query: query});
const utils = api.useUtils()

return (
   <Button onClick={() => {
        // doesn't work
        utils.list.services.refetch({query: query}); 
        
        // this does work
        const key = getQueryKey(api.list.services, {query: query});
        queryClient.refetchQueries(key) 
    }}>test</Button>
)